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数字 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ,未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 

如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 





探 
2007 年 毕业 于 吉林 大 学 软 
件 学 院 ， 目 前 就 职 于 腾讯 
AlloyTeam 前 端 团队 ， 高 
级 工程 师 。 

曾 参 与 Web QQ、QQ 群 、 
Q+ 开 发 者 网 站 、 微 云 、 
QQ 兴趣 部 落 等 大 型 前 端 项 
目的 开发 。 有 Java、Python 
和 JavaScript 的 开发 经 验 ， 
业余 作品 有 HTML5 版 街头 
霸王 等 。 
平时 喜欢 电影 和 音乐 ， 业 
余 时 间 是 一 名 健身 教练 。 
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本 和 





一 部 分 讲解 了 JavaScript 语言 面向 对 象 和 





模式 中 的 体现 ， 以 及 一 些 常见 的 面向 对 象 编程 技巧 和 日 常 开发 中 的 代码 重 构 。 
书 中 所 有 示例 均 来 自作 者 长 期 的 开发 实践 ， 与 实际 开发 密切 相关 ， 适 用 于 初 、 中 、 高 级 Web 前 端 开 





发 人 员 ， 


习 版 本 图 书馆 CIP 数 据 核 字 (2015) 第 072098 号 


内 容 提 要 




















区 根据 JavaScript 语言 的 特性 ， 全 画 





[发 实践 / 曾 探 著 . 一 北京 : 


总 结 了 实际 工作 中 常用 的 设计 模式 。 全 书 共 分 为 三 个 部 分 ， 第 














国 数 式 编程 的 知识 及 其 在 设计 模式 方面 的 作用 ; 第 二 部 分 通过 
步 步 完 善 示例 代码 ， 由 浅 入 深 地 讲解 了 16 个 设计 模式 ; 第 三 部 分 讲述 了 面向 对 象 的 设计 原则 及 其 在 设计 























尤其 适合 想 往 架构 师 晋 级 的 中 高 级 程序 员 阅 读 。 
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如 果 时 间 倒 退 一 点 ， 很 难 想象 我 这 样 的 “ 懒 人 ”会 花 上 近 一 年 的 业余 时 间 来 完成 这 本 书 。 

这 本 书 的 原型 是 我 发 表 在 腾讯 内 部 KM 论坛 的 一 篇 文章 《JavaScript 常 用 设计 模式 》。 这 篇 文 
章 反响 不 错 ， 还 位 列 2012 年 KM 十 大 热门 文章 第 一 名 。 不 过 说 老实 话 ， 当 时 自己 也 是 模式 的 初学 
者 ， 和 网 上 大 部 分 讨论 设计 模式 的 文章 一 样 , 这 篇 文章 里 其 实 存在 一 些 错误 ， 这 里 要 诚 县 地 说 声 
抱歉 。 也 正 是 由 于 这 个 原因 ,， 近 两 年 我 重新 投身 于 对 设计 模式 的 研究 之 中 。 尽 管 如 此 ， 当 在 电脑 
上 敲 下 本 书 第 一 行 字 的 时 候 , 我 心中 还 是 非常 志 起 。 一 是 我 自己 本 身 并 非 理 论 派 ， 大 部 分 工作 时 
间 都 在 做 上 层 应 用 开发 ,很 多 偏 理 论 的 知识 对 于 我 来 说 , 也 是 一 个 学 习 加 总 结 的 过 程 ， 二 是 不 确 
保 自己 能 否 牺牲 如 此 多 的 业余 时 间 ， 毕 竞 很 难 前 减 玩 LOL 的 时 间 。 

无 论 如 何 ， 它 终于 和 大 家 见面 了 。 




























































































本 书 结构 


本 书 共 分 为 三 大 部 分 。 

第 一 部 分 讲解 了 JavaScript 面 向 对 象 和 函数 式 编程 方面 的 知识 ， 主 要 包括 静态 类 型 语言 和 动 
态 类 型 语言 的 区 别 及 其 在 实现 设计 模式 时 的 异同 ， 以 及 封装 、 继 承 、 多 态 在 动态 类 型 语言 中 的 
体现 ， 此 外 还 介绍 了 JavaScript 基 于 原型 继承 的 面向 对 象 系统 的 来 龙 去 脉 ， 给 学 习 设 计 模式 做 好 
铺垫 。 

第 二 部 分 是 核心 部 分 ， 通 过 从 普通 到 更 好 的 代码 示例 ， 由 浅 到 深 地 讲解 了 16 个 设计 模式 。 
第 三 部 分 主要 讲解 面向 对 象 的 设计 原则 及 其 在 设计 模式 中 的 体现 , 还 介绍 了 一 些 常见 的 面向 
对 象 编程 技巧 和 日 常 开 发 中 的 代码 重 构 。 
































目标 读者 


本 书 主要 面向 初中 级 JavaScript 开 发 人 员 。 本 书 虽 然 以 设计 模式 为 主题 ， 但 也 讲述 了 一 些 
JavaScript 开 发 中 需要 的 基础 知识 , 初级 程序 员 也 能 从 这 里 找到 自己 需要 的 东西 。 而 对 于 中 级 程序 
员 而 言 ， 学 习 设计 模式 的 过 程 ， 可 能 正 是 往 高 级 进 阶 的 过 程 。 
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示例 代码 与 勘误 


本 书 提 供 了 丰富 的 示例 ， 示 例 代码 可 以 在 图 灵 社 区 本 书 主页 ( http:/www.ituring.com.cn/ 
book/1632 ) 的 “ 随 书 下 载 ” 中 下 载 使 用 。 











另外 ， 由 于 作者 的 水 平和 时 间 所 限 ， 本 书 中 难免 存在 一 些 遗 憾 。 如 果 大 家 发 现 有 什么 问题 , 或 
者 对 本 书 有 任何 建议 , 欢迎 到 图 灵 社 区 本 书 主 页 提交 勘误 ,也 可 以 发 送 邮 件 到 svenzeng@tencent.com 
来 讨论 ， 先 谢谢 ! @ 





致谢 





虽然 在 写作 过 程 中 经 历 了 不 少 曲折 , 但 最 终 顺 利 完成 。 在 这 里 , 我 想 感谢 为 我 提供 帮助 的 所 
有 人 。 


训 


澳 图 灵 的 美女 编辑 Alice， 没 有 她 的 帮助 ， 这 本 书 不 可 能 完成 。 


谢 AlloyTeam 团 队 中 每 一 个 成 员 对 我 的 指导 和 帮助 ， 在 这 里 工作 不 仅 是 工作 ， 也 是 生活 很 
重要 的 一 部 分 。 
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谢 贺 师 俊 、 王 集 铝 、 易 郑 超 、 程 巧 非 几 位 老师 提供 的 技术 指导 和 宝贵 建议 。 
感谢 设计 师 “ 出 过 设计 ”设计 的 搬 画 和 封面 ， 它 们 让 内 容 更 加 生动 有 趣 。 
最 后 ， 感 谢 我 的 妻子 Annie， 遇 见 你 ， 是 最 美丽 的 意外 。 
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《设计 模式 》 一 书 自 1995 年 成 书 一 来 ,一 直 是 程序 员 谈 论 的 “高 端 ” 话 题 之 一 。 许 多 程序 员 
从 设计 模式 中 学 到 了 设计 软件 的 灵感 ,或 者 找到 了 问题 的 解决 方案 。 在 社区 中 , 既 有 人 对 模式 无 
比 尝 拜 ， 也 有 人 对 模式 充满 误解 。 有 些 程序 员 把 设计 模式 视 为 圣经 ， 唯 模式 至 上 ; 有 些 人 却 认为 
设计 模式 只 在 C++ 或 者 Java 中 有 用 武之 地 ，jJavaScript 这 种 动态 语言 根本 就 没有 设计 模式 一 说 。 

那么 , 在 进入 设计 模式 的 学 习 之 前 , 我 们 最 好 还 是 从 模式 的 起 源 说 起 , 分别 听 听 这 些 不 同 的 
声音 。 

设计 模式 并 非 是 软件 开发 的 专业 术语 。 实际 上 ,“ 模 式 ” 最 早 诞 生 于 建筑 学 。20 世 纪 70 年 代 ， 
哈佛 大 学 建筑 学 博士 Christopher Alexander 和 他 的 研究 团队 花 了 约 20 年 的 时 间 , 人 研究 了 为 解决 同一 
个 问题 而 设计 出 的 不 同 建筑 结构 ， 从 中 发 现 了 那些 高 质量 设计 中 的 相似 性 ， 并 且 用 “模式 ”来 指 
代 这 种 相似 性 。 


受 Christopher Alexander 工 作 的 启发 ，Erich Gamma、Richard Helm、Ralph Johnson、John 
Vlissides 四 人 (人称 Gang Of Four ，GoF ) 把 这 种 “模式 ”观点 应 用 于 面向 对 象 的 软件 设计 中 ， 
并 且 总 结 了 23 种 常见 的 软件 开发 设计 模式 ,录入 《设计 模式 : 可 复 用 面向 对 象 软件 的 基础 》 一 书 。 

设计 模式 的 定义 是 : 在 面向 对 象 软件 设计 过 程 中 针对 特定 问题 的 简洁 而 优雅 的 解决 


方案 。 
































通俗 一 点 说 , 设计 模式 是 在 某 种 场合 下 对 某 个 问题 的 一 种 解决 方案 。 如 果 再 通俗 一 点 说 , 设 
计 模 式 就 是 给 面向 对 象 软件 开发 中 的 一 些 好 的 设计 取 个 名 字 。 

GoF 成 员 之 一 John Vlissides 在 他 的 另 一 本 关于 设计 模式 的 著作 《设计 模式 沉思 录 》 中 写 过 这 
样 一 段 话 : 

设想 有 一 个 电子 爱好 者 , 虽然 他 没有 经 过 正规 的 培训 , 但 是 却 日 积 月 累 地 设计 并 制 

造 出 许多 有 用 的 电子 设备 : 业余 无 线 电 、 盖 革 计 数 器 、 报 警 器 等 。 有 一 天 这 个 爱好 者 决 

定 重新 回 到 学 校 去 攻读 电子 学 学 位 ,来 让 自己 的 才能 得 到 真实 的 认可 。 随 着 课程 的 展开 ， 

这 个 爱好 者 突然 发 现 课程 内 容 都 似曾相识 。 似曾相识 的 并 不 是 术语 或 者 表述 的 方式 , 而 

是 背后 的 概念 。 这 个 爱好 者 不 断 学 到 一 些 名 称 和 原理 , 虽然 这 些 名 称 和 原理 原来 他 不 知 

道 ， 但 事实 上 他 多 年 来 一 直 都 在 使 用 。 整 个 过 程 只 不 过 是 一 个 接 一 个 的 顿悟 。 






































软件 开发 中 的 设计 也 是 如 此 。 这 些 “ 好 的 设计 ”并 不 是 GoF 发 明 的 ， 而 是 早已 存在 于 软件 开 
发 中 。 一 个 稍 有 经 验 的 程序 员 也 许 在 不 知 不 觉 中 数 次 使 用 过 这 些 设计 模式 。GoF 最 大 的 功绩 是 把 
这 些 “ 好 的 设计 ”从 浩瀚 的 面向 对 象 世界 中 挑选 出 来 ， 并 且 给 予 它们 一 个 好 听 又 好 记 的 名 字 。 

那么 ,给 模式 一 个 名 字 有 什么 意义 呢 ? 上 述 故事 中 的 电子 爱好 者 在 未 进入 学 校 之 前 , 一 点 都 
不 知道 这 些 关 于 电器 的 概念 有 一 些 特定 的 名 称 ， 但 这 不 妨碍 他 制造 出 一 些 电子 设备 。 


实际 上 给 “模式 ” 取 名 的 意义 非常 重要 。 人 类 可 以 走 到 生物 链 顶 端的 前 两 个 原因 分 别 是 会 “使 
用 名 字 ” 和 “使 用 工具 ”。 在 软件 设计 中 ， 一 个 好 的 设计 方案 有 了 名 字 之 后 ,才能 被 更 好 地 传播 ， 
人 们 才 有 更 多 的 机 会 去 分 享 和 学 习 它 们 。 

也 许 这 个 小 故事 可 以 说 明 名 字 对 于 模式 的 重要 性 : 假设 你 是 一 名 足球 教练 , 正在 球场 边 指挥 
一 场 足球 赛 。 通过 一 段 时 间 的 观察 后 , 发 现 对 方 的 后 卫 技术 精 淇 , 身体 强壮 , 但 边 后 卫 速 度 较 慢 ， 
中 后 卫 身 高 和 头 球 都 非常 一 般 。 于 是 你 在 场 边 大声 指 挥 队员 :“ 用 速度 突破 对 方 边 后卫 之 后 ， 往 
球门 方向 中 出 高 球 ， 中 路 接应 队员 抢 点 头 球 攻 门 。 

在 机 会 稍 纵 即 逝 的 足球 场 上 , 教练 这 样 费 尽 口舌 地 指挥 队员 比赛 无 疑 是 荒 恋 的 。 实 际 上 这 种 
战术 有 一 个 名 字 叫 作 “ 下 底 传 中 ”。 正 因为 战术 有 了 对 应 的 名 字 ， 在 球场 上 教练 可 以 很 方便 地 和 
球员 交流 。“ 下 底 传 中 ”这 种 战术 即 是 足球 场 上 的 一 种 “模式 ”。 

在 软件 设计 中 亦 是 如 此 。 我 们 都 知道 设计 经 验 非常 重要 。 也 许 我 们 都 有 过 这 种 感觉 : 这 个 问 
题 发 生 的 场景 似曾相识 ， 以 前 我 遇 到 并 解决 过 这 个 问题 ,但 是 我 不 知道 怎么 跟 别人 去 描述 它 。 我 
们 非常 希望 给 这 个 问题 出 现 的 场景 和 解决 方案 取 一 个 统一 的 名 字 ， 当 别人 听 到 这 个 名 字 的 时 候 ， 
便 知道 我 想 表 达 什 么 。 比 如 一 个 JavaScript 新 手 今天 学 会 了 编写 each 函 数 ，each 了 水 数 用 来 迭代 一 个 
数组 。 他 很 难 想到 这 个 each 孙 数 其 实 就 是 迭代 器 模式 。 于 是 他 向 别人 描述 这 个 函数 结构 和 意图 的 
时 候 会 遇 到 困难 , 而 一 旦 大 家 对 迭代 器 模式 这 个 名 字 达 成 了 共识 , 剩 下 的 交流 便 是 自然 而 然 的 事情 。 






































































































































学 习 模 式 的 作用 


小 说 家 很 少 从 头 开始 设计 剧情 , 足球 教练 也 很 少 从 头 开始 发 明 战术 , 他 们 总 是 沿 秦 一 些 已 经 
存在 的 模式 。 当 足球 教练 看 到 对 方 边 后 卫 速 度 慢 ， 中 后 卫 身 高 矮 时 ， 自 然 会 想到 “下 底 传 中 ”这 
种 模式 。 

同样 , 在 软件 设计 中 , 模式 是 一 些 经 过 了 大 量 实际 项 目 验 证 的 优秀 解决 方案 。 熟悉 这 些 模式 
的 程序 员 ， 对 菜 些 模式 的 理解 也 许 形成 了 条 件 反射 。 当 合适 的 场景 出 现时 ,他 们 可 以 很 快 地 找到 
某 种 模式 作为 解决 方案 。 

比如 ， 当 他 们 看 到 系统 中 存在 一 些 大量 的 相似 对 象 , 这 些 对 象 给 系统 的 内 存 带 来 了 较 大 的 负 
担 。 如 果 他 们 熟悉 享 元 模式 ， 那 么 第 一 时 间 就 可 以 想到 用 享 元 模式 来 优化 这 个 系统 。 再 比如 ， 系 
统 中 某 个 接口 的 结构 已 经 不 能 符合 目前 的 需求 ， 但 他 们 又 不 想 去 改动 这 个 被 灰尘 遮 住 的 老 接 口 ， 
一 个 熟悉 模式 的 程序 员 将 很 快 地 找到 适配器 模式 来 解决 这 个 问题 。 
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如 果 我 们 还 没有 学 习 全 部 的 模式 ， 当 遇 到 一 个 问题 时 , 我 们 页 茧 之 中 觉得 这 个 问题 出 现 的 几 
率 很 高 , 说 不 定 别人 也 遇 到 过 同样 的 问题 , 并且 已 经 把 它 整 理 成 了 模式 , 提供 了 一 种 通用 的 解决 
方案 。 这 时 候 去 翻 翻 《设计 模式 》 这 本 书 也 许 就 会 有 意外 的 收获 。 


模式 在 不 同 语言 之 间 的 区 别 


《设计 模式 》 一 书 的 副标题 是 “可 复 用 面向 对 象 软件 的 基础 "。《 设 计 模 式 》 这 本 书 完全 是 从 
面向 对 象 设计 的 角度 出 发 的 ， 通过 对 封装 、 继 承 、 多 态 、 组 合 等 技术 的 反复 使 用 ,提炼 出 一 些 可 
重复 使 用 的 面向 对 象 设计 技巧 。 所 以 有 一 种 说 法 是 设计 模式 仅仅 是 就 面向 对 象 的 语言 而 言 的 。 

《设计 模式 》 最 初 讲 的 确实 是 静态 类 型 语言 中 的 设计 模式 ， 原 书 大 部 分 代码 由 C++ 写成 ， 但 
设计 模式 实际 上 是 解决 某 些 问 题 的 一 种 思想 , 与 具体 使 用 的 语言 无 关 。 模式 社区 和 语言 一 直 都 在 
发 展 ， 如 今 , 除了 主流 的 面向 对 象 语言 ， 困 数 式 语 言 的 发 展 也 非常 迅猛 。 在 函数 式 或 者 其 他 编程 
范 型 的 语言 中 ， 设 计 模 式 依 然 存 在 。 

人 类 飞 上 天 空 需 要 借助 飞机 等 工具 ,而 鸟 儿 天 生 就 有 翅膀 。 在 Dota 游 戏 里 , 牛头 人 的 人 生 目 
标 是 买 一 把 跳 刀 ( 跳 刀 可 以 使 用 跳跃 技能 )， 而 敌 法 师 天 生 就 有 跳跃 技能 。 因 为 语言 的 不 同 ， 一 
些 设计 模式 在 另外 一 些 语言 中 的 实现 也 许 跟 我 们 在 《设计 模式 》 一 书 中 看 到 的 大 相 径 庭 ， 这 一 点 
也 不 令 人 意外 。 

Google 的 研究 总 监 Peter Norvig 早 在 1996 年 一 篇 名 为 “动态 语言 设计 模式 ”的 演讲 中 ,就 指出 
了 GoF 所 提出 的 23 种 设计 模式 ， 其 中 有 16 种 在 Lisp 语 言 中 已 经 是 天 然 的 实现 。 比 如 ，Command 模 
式 在 Java 中 需要 一 个 命令 类 ,一 个 接收 者 类 , 一 个 调用 者 类 。Command 模 式 把 运算 块 封装 在 命令 
对 象 的 方法 内 ,成 为 该 对 象 的 行为 ， 并 把 命令 对 象 四 处 传递 。 但 在 Lisp 或 者 JavaScript 这 些 把 函数 
当 作 一 等 对 象 的 语言 中 ， 函 数 便 能 封装 运算 块 ,并 且 函 数 可 以 被 当成 对 象 一 样 四 处 传递 ,这样 一 
来 ， 命 令 模式 在 Lisp 或 者 JavaScript 中 就 成 为 了 一 种 隐形 的 模式 。 

在 Java 这 种 静态 编译 型 语言 中 ， 无 法 动态 地 给 已 存在 的 对 象 添 加 职责 ， 所 以 一 般 通 过 包装 类 
的 方式 来 实现 装饰 者 模式 。 但 在 JavaScript 这 种 动态 解释 型 语言 中 , 给 对 象 动态 添加 职责 是 再 简单 
不 过 的 事情 。 这 就 造成 了 JavaScript 语 言 的 装饰 者 模式 不 再 关注 于 给 对 和 象 动态 添加 职责 , 而 是 关注 
于 给 函数 动态 添加 职责 。 


设计 模式 的 适用 性 

设计 模式 被 一 些 人 认为 只 是 奇伟 其 谈 的 东西 , 这 些 人 认为 设计 模式 并 没有 多 大 用 途 。 毕 苋 我 
们 用 普通 的 方法 就 能 解决 的 问题 , 使 用 设计 模式 可 能 会 增加 复杂 度 , 或 带 来 一 些 额外 的 代码 。 如 
果 对 一 些 设计 模式 使 用 不 当 ， 事 情 还 可 能 变 得 更 糟 。 

从 某 些 角度 来 看 , 设计 模式 确实 有 可 能 带 来 代码 量 的 增加 , 或 许 也 会 把 系统 的 逻辑 搞 得 更 复 
杂 。 但 软件 开发 的 成 本 并 非 全 部 在 开发 阶段 , 设计 模式 的 作用 是 让 人 们 写 出 可 复 用 和 可 维护 性 高 











































































































































































































的 程序 。 假设 有 一 个 空房 间 , 我 们 要 日 复 一 日 地 往 里面 放 一 些 东西 。 最 简单 的 办 法 当然 是 把 这 些 
东西 直接 扔 进去 ,但 是 时 间 久 了 ， 就 会 发 现 很 难 从 这 个 房子 里 找到 自己 想 要 的 东西 ， 要 调整 某 几 
样 东 西 的 位 置 也 不 容易 。 所 以 在 房间 里 做 一 些 柜 子 也 许 是 个 更 好 的 选择 , 虽然 柜子 会 增加 我 们 的 
成 本 , 但 它 可 以 在 维护 阶段 为 我 们 带 来 好 处 。 使 用 这 些 柜 子 存放 东西 的 规则 , 或 许 就 是 一 种 模式 。 

所 有 设计 模式 的 实现 都 遵循 一 条 原则 ， 即 “ 找 出 程序 中 变化 的 地 方 ， 并 将 变化 封装 起 来 ”。 
一 个 程序 的 设计 总 是 可 以 分 为 可 变 的 部 分 和 不 变 的 部 分 。 当 我 们 找 出 可 变 的 部 分 , 并 且 把 这 些 部 
分 封装 起 来 ,那么 剩 下 的 就 是 不 变 和 稳定 的 部 分 。 这 些 不 变 和 稳定 的 部 分 是 非常 容易 复 用 的 。 这 
也 是 设计 模式 为 什么 描写 的 是 可 复 用 面向 对 象 软件 基础 的 原因 。 

设计 模式 被 人 误解 的 一 个 重要 原因 是 人 们 对 它 的 误 用 和 滥用 , 比如 将 一 些 模 式 用 在 了 错误 的 
场景 中 ， 或 者 说 在 不 该 使 用 模式 的 地 方 刻意 使 用 模式 。 特 别 是 初学 者 在 刚 学 会 使 用 一 个 模式 时 ， 
恨不得 把 所 有 的 代码 都 用 这 个 模式 来 实现 。 锤 子 理论 在 这 里 体现 得 很 明显 : 当 我 们 有 了 一 把 锤子 ， 
看 什么 都 是 钉子 。 拿 足球 比赛 的 例子 来 说 ， 我 们 的 目标 只 是 进 球 ,“ 下 底 传 中 ”这 种 “模式 ” 仅 
仅 是 达到 进 球 目 标的 一 种 手段 。 当 我 们 面临 密集 防守 时 ， 下 底 传 中 或 许 是 一 种 好 的 选择 ; 但 如 果 
我 们 的 球员 获得 了 一 个 直接 面 对 对 方 守门 员 的 单刀 机 会 , 那么 是 否 还 要 把 球 先 传 向 边 路 队友 , 再 
由 边 路 队友 来 一 个 边 路 传 中 呢 ? 答案 是 显而易见 的 , 模式 应 该 用 在 正确 的 地 方 。 而 哪些 才 算 正确 
的 地 方 ， 只 有 在 我 们 深刻 理解 了 模式 的 意图 之 后 ， 再 结合 项 目的 实际 场景 才 会 知道 。 











































































































































































































分 辨 模式 的 关键 是 意图 而 不 是 结构 


在 设计 模式 的 学 习 中 ,有 人 经 常 发 出 这 样 的 疑问 : 代理 模式 和 装饰 者 模式 , 策略 模式 和 状态 
模式 ， 策 略 模式 和 智能 命令 模式 ， 这 些 模 式 的 类 图 看 起 来 儿 乎 一 模 一 样 ， 它 们 到 底 有 什么 区 别 ? 

实际 上 这 种 情况 是 普遍 存在 的 , 许多 模式 的 类 图 看 起 来 都 差不多 , 模式 只 有 放 在 具体 的 环境 
下 才 有 意义 。 比 如 我 们 的 手机 ， 把 它 当 电话 的 时 候 , 它 就 是 电话 ; 把 它 当 曾 钟 的 时 候 , 它 就 是 闹 
钟 ; 用 它 玩 游戏 的 时 候 ， 它 就 是 游戏 机 。 我 看 到 有 人 手中 拿 着 iPhone18， 但 那 实际 上 可 能 只 是 一 
个 吹风 机 。 有 很 多 模式 的 类 图 和 结构 确实 很 相似 , 但 这 不 太 重 要 ， 辨 别 模式 的 关键 是 这 个 模式 出 
现 的 场景 ， 以 及 为 我 们 解决 了 什么 问题 。 









































对 JavaScript 设 计 模 式 的 误解 


虽然 JavaScript 是 一 门 完全 面向 对 象 的 语言 ， 但 在 很 长 一 段 时 间 内 ，JavaScript 在 人 们 的 印象 
中 只 是 用 来 验证 表单 , 或 者 完成 一 些 简单 动画 特效 的 脚本 语言 。 在 JavaScript 语 言 上 运用 设计 模式 
难免 显得 小 题 大 做 。 但 目前 JavaScript 已 成 为 最 流行 的 语言 之 一 ,在 许多 大 型 Web 项 目 中 ,JavaScript 
代码 的 数量 已 经 非常 多 了 。 我 们 绝对 有 必要 把 一 些 优秀 的 设计 模式 借鉴 到 JavaScript 这 门 语言 中 。 
许多 优秀 的 JavaScript 开 源 框架 也 运用 了 不 少 设计 模式 。 

JavaScript 设 计 模 式 的 社区 目前 还 几乎 是 一 片 范 漠 。 网 络 上 有 一 些 讨论 JavaScript 设 计 模 式 的 
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资料 和 文章 ， 但 这 些 资料 和 文章 大 多 都 存在 两 个 问题 。 

第 一 个 问题 是 习惯 把 静态 类 型 语言 的 设计 模式 照搬 到 JavaScript 中 ， 比 如 有 人 为 了 模拟 
JavaScript 版 本 的 工厂 方法 ( Factory Method ) 模式 ， 而 生硬 地 把 创建 对 象 的 步骤 延迟 到 子 类 中 。 
实际 上 ， 在 Java 等 静态 类 型 语言 中 ， 让 子 类 来 “决定 ”创建 何 种 对 象 的 原因 是 为 了 让 程序 迎合 
赖 倒置 原则 ( DIP )。 在 这 些 语言 中 创建 对 象 时 ， 先 解 开 对 象 类 型 之 间 的 耦合 关系 非常 重要 ,这样 
才 有 机 会 在 将 来 让 对 象 表现 出 多 态 性 。 

而 在 JavaScript 这 种 类 型 模糊 的 语言 中 ， 对 象 多 态 性 是 天 生 的 ， 一 个 变量 既 可 以 指向 一 个 类 ， 
又 可 以 随时 指向 男 外 一 个 类 ,JavaScript 不 存在 类 型 看 合 的 问题 ,自然 也 没有 必要 刻意 去 把 对 象 “ 延 
述 ” 到 子 类 创建 ,也 就 是 说 ，JavaScript 实 际 上 是 不 需要 工厂 方法 模式 的 。 模 式 的 存在 首先 是 能 》 
我 们 解决 什么 问题 ， 这 种 牵强 的 模拟 只 会 让 人 觉得 设计 模式 既 难 懂 又 没什么 用 处 。 

男 一 个 问题 是 习惯 根据 模式 的 名 字 去 腾 测 该 模式 的 一 切 。 比如 命令 模式 本 意 是 把 请 求 封装 到 
对 象 中 , 利用 命令 模式 可 以 解 开 请 求 发 送 者 和 请 求 接受 者 之 间 的 耦合 关系 。 但 命令 模式 经 常 被 人 
误解 为 只 是 一 个 名 为 execute 的 普通 方法 调用 。 这 个 方法 除了 叫 作 execute 之 外 , 其实 并 没有 看 出 其 
他 用 处 。 所 以 许多 人 会 误会 命令 模式 的 意图 ， 以 为 它 其 实 没什么 用 处 ， 从 而 联想 到 其 他 设计 模式 
也 没有 用 处 。 

这 些 误解 都 影响 了 设计 模式 在 JavaScript 语 言 中 的 发 展 。 


















































































































































模式 的 发 展 

前 面 说 过 ,模式 的 社区 一 直 在 发 展 。GoF 在 1995 年 提出 了 23 种 设计 模式 。 但 模式 不 仅仅 局 限 
于 这 23 种 ,在 近 20 年 的 时 间 里 ,也 许 有 更 多 的 模式 已 经 被 人 发 现 并 总 结 了 出 来 ,比如 一 些 JavaScript 
图 书 中 会 提 到 模块 模式 、 沙 箱 模 式 等 。 这 些 “ 模 式 ” 能 否 被 世人 公认 并 流传 下 来 ， 还 有 待 时 间 验 
证 。 不 过 某 种 解决 方案 要 成 为 一 种 模式 , 还 是 有 几 个 原则 要 遵守 的 。 这 几 个 原则 即 是 “再 现 ”“ 教 
学 ”和 “能 够 以 一 个 名 字 来 描述 这 种 模式 ”。 

不 管 怎样 ,在 一 些 模式 被 公认 并 流行 起 来 之 前 , 需要 慎重 地 冠 之 以 某 种 模式 的 名 称 。 否 则 模 
式 也 许 很 容易 泛滥 ， 导致 人 人 都 在 发 明 模 式 , 这 反而 增加 了 交流 的 难度 。 说 不 准 哪 天 我 们 就 能 听 
到 有 人 说 全 局 变量 模式 、 加 模式 、 减 模式 等 。 

在 《设计 模式 》 出 版 后 的 近 20 年 里 ,也 出 现 了 另外 一 批 讲述 设计 模式 的 优秀 读物 。 其 中 许多 
都 获得 过 Jolt 大 奖 。 数 不 清 的 程序 员 从 设计 模式 中 获 益 ， 也 许 是 改善 了 自己 编写 的 某 个 软件 ， 也 
许 是 从 设计 模式 的 学 习 中 更 好 地 理解 了 面向 对 象 编程 思想 。 无论 如 何 , 相信 对 我 们 这 些 大 多 数 的 
普通 程序 员 来 说 ， 系 统 地 学 习 设 计 模 式 并 没有 坏处 ， 相 反 ， 你 会 在 模式 的 学 习 过 程 中 受益 菲 浅 。 
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第 一 部 分 





基础 知识 


作为 本 书 的 第 一 部 分 ， 我 们 在 进入 设计 模式 的 学 习 之 前 ， 需 要 先 了 解 一 些 相关 的 周边 知识 ， 
例如 一 些 面向 对 象 的 基础 知识 、this 等 重要 概念 , 还 要 掌握 一 些 函 数 式 编程 的 技巧 。 这 些 都 是 学 
习 设计 模式 的 必要 铺垫 。 
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面向 对 象 的 JavaScript 





JavaScript 没有 提供 传统 面向 对 象 语言 中 的 类 式 继承 ,而 是 通过 原型 委托 的 方式 来 实现 对 象 
与 对 象 之 间 的 继承 。JavaScript 也 没有 在 语言 层面 提供 对 抽象 类 和 接口 的 支持 。 正 因为 存在 这 些 
跟 传统 面向 对 象 语言 不 一 致 的 地 方 ,我们 在 用 设计 模式 编写 代码 的 时 候 , 更 要 跟 传统 面向 对 象 语 
言 加 以 区 别 。 所 以 在 正式 学 习 设 计 模 式 之 前 ,我们 有 必要 先 了 解 一 些 JavaScript 在 面向 对 象 方面 
的 知识 。 


1.1 动态 类 型 语言 和 了 鸭子 类 型 

程 语 言 按照 数据 类 型 大 体 可 以 分 为 两 类 ， 一 类 是 静态 类 型 语言 ， 男 一 类 是 动态 类 型 语言 。 
态 类 型 语言 在 编译 时 便 已 确定 变量 的 类 型 , 而 动态 类 型 语言 的 变量 类 型 要 到 程序 运行 的 时 
候 ， 待 变量 被 赋予 某 个 值 之 后 ， 才 会 具有 某 种 类 型 。 

态 类 型 语言 的 优点 首先 是 在 编译 时 就 能 发 现 类 型 不 匹配 的 错误 , 编辑 器 可 以 帮助 我 们 提前 
避免 程序 在 运行 期 间 有 可 能 发 生 的 一 些 错误 。 其 次 ， 如 果 在 程序 中 明确 地 规定 了 数据 类 型 ,编译 
器 还 可 以 针对 这 些 信息 对 程序 进行 一 些 优化 工作 ， 提 高 程序 执行 速度 。 

静态 类 型 语言 的 缺点 首先 是 迫使 程序 员 依 照 强 契 约 来 编写 程序 ， 为 每 个 变量 规定 数据 类 型 ， 
归根 结 底 只 是 辅助 我 们 编写 可 靠 性 高 程序 的 一 种 手段 ， 而 不 是 编写 程序 的 目的 , 毕竟 大 部 分 人 编 
写 程序 的 目的 是 为 了 完成 需求 交付 生产 。 其 次 ， 类 型 的 声明 也 会 增加 更 多 的 代码 ,在 程序 编写 过 
程 中 ， 这 些 细节 会 让 程序 员 的 精力 从 思考 业务 逻辑 上 分 散 开 来 。 

动态 类 型 语言 的 优点 是 编写 的 代码 数量 更 少 , 看 起 来 也 更 加 简洁 , 程序 员 可 以 把 精力 更 多 地 
放 在 业务 逻辑 上 面 。 虽然 不 区 分 类 型 在 某 些 情况 下 会 让 程序 变 得 难以 理解 ,但 整体 而 言 ， 代 码 量 
越 少 ， 越 专注 于 逻辑 表达 ， 对 阅读 程序 是 越 有 帮助 的 。 

动态 类 型 语言 的 缺点 是 无 法 保证 变量 的 类 型 , 从 而 在 程序 的 运行 期 有 可 能 发 生 跟 类 型 相关 的 
错误 。 这 好 像 在 商店 买 了 一 包 牛 肉 疗 条 ， 但 是 要 真正 吃 到 嘴 里 才 知 道 是 不 是 牛肉 味 。 
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在 JavaScript 中 ， 当 我 们 对 一 个 变量 赋值 时 ， 显 然 不 需要 考虑 它 的 类 型 ， 因 此 ，JavaScript 


是 一 门 典型 的 动态 类 型 语言 。 





太 类 型 




















动态 类 型 语言 对 变量 类 型 的 宽容 给 实际 编码 带 来 了 很 大 的 灵活 性 。 由 于 无 需 进行 类 型 检测 ， 
我 们 可 以 尝试 调用 任何 对 象 的 任意 方法 ， 而 无 需 去 考虑 它 原本 是 否 被 设计 为 拥有 该 方法 。 
这 一 切 都 建立 在 鸭子 类 型 (duck typing ) 的 概念 上 ， 觅 子 类 型 的 通 众说 法 是 :“ 如 果 它 走 起 


路 来 像 鸭 子 ， 叫 起 来 也 是 鸭子 ， 那 么 它 就 是 鸭子。 
我 们 可 以 通过 一 个 小 故事 来 更 次 刻 地 了 解 鸭 子 类 型 。 


二 




















从 前 在 JavaScript 王国 里 ， 有 一 个 国王 ， 他 觉得 世界 上 最 美妙 的 声音 就 是 鸭子 的 叫 
声 ， 于 是 国王 召集 大 臣 ， 要 组 建 一 个 1000 只 鸭子 组 成 的 合唱 团 。 大 丐 们 找 访 了 全 国 ， 
终于 找到 999 只 鸭子 , 但 是 始终 还 差 一 只 ,最 后 大 丐 发 现 有 一 只 非常 特别 的 鸡 ， 它 的 叫 
声 跟 鸭 子 一 模 一 样 ， 于 是 这 只 鸡 就 成 为 了 合唱 团 的 最 后 一 员 。 


























这 个 故事 告诉 我 们 , 国王 要 听 的 只 是 鸭子 的 叫 声 , 这 个 声音 的 主人 到 底 是 鸡 还 是 鸭 并 不 重要 。 
































岗子 类 型 指导 我 们 只 关注 对 象 的 行为 ， 而 不 关注 对 象 本 身 ， 也 就 是 关注 HAS-A, 而 不 是 IS-A。 


下 面 我 们 用 代码 来 模拟 这 个 故事 。 


var duck = { 
duckSinging: function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
} 


}; 


var chicken = { 
duckSinging: function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
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} 
}; 
var choir = []; // 合唱 团 
var joinChoir = function( animal ){ 
if ( animal && typeof animal.duckSinging === 'function' ){ 
choir.push( animal ); 
console.log(' 茶 喜 加 入 合唱 团 ' ); 
console.1log( ' 合 唱 团 已 有 成 员 数 量 :' + choir.length ); 


} 
}; 


joinChoir( duck ); // 茶 喜 加 入 合唱 团 

joinChoir( chicken ); // 茶 喜 加 入 合唱 团 

我 们 看 到 ,对 于 加 入 合唱 团 的 动物 ,大臣 们 根本 无 需 检查 它们 的 类 型 ,而 是 只 需要 保证 它们 
拥有 ducksinging 方法 。 如 果 下 次 期 望 加 入 合唱 团 的 是 一 只 小 狗 ， 而 这 只 小 狗 刚好 也 会 鸭子 叫 ， 
我 相信 这 只 小 狗 也 能 顺利 加 入 。 

在 动态 类 型 语言 的 面向 对 象 设 计 中 , 鸭子 类 型 的 概念 至 关 重 要 。 利 用 了 鸭子 类 型 的 思想 , 我们 
不 必 借助 超 类 型 的 帮助 ， 就 能 轻松 地 在 动态 类 型 语言 中 实现 一 个 原则 :“ 面 向 接口 编程 ， 而 不 是 
面向 实现 编程 ”。 例 如 ， 一 个 对 象 若 有 push 和 pop 方法 ， 并 且 这 些 方法 提供 了 正确 的 实现 ， 它 就 
可 以 被 当 作 栈 来 使 用 。 一 个 对 象 如 果 有 length 属性 ， 也 可 以 依照 下 标 来 存 取 属 性 ( 最 好 还 要 拥 
有 slice 和 splice 等 方法 )， 这 个 对 象 就 可 以 被 当 作 数 组 来 使 用 。 

在 静态 类 型 语言 中 ， 要 实现 “面向 接口 编程 ”并 不 是 一 件 容易 的 事情 ,往往 要 通过 抽象 类 或 
者 接口 等 将 对 象 进行 向 上 转型 。 当 对 象 的 真正 类 型 被 隐藏 在 它 的 超 类 型 身后 , 这 些 对 象 才能 在 类 
型 检查 系统 的 “监视 ”之 下 互相 被 替换 使 用 。 只 有 当 对 象 能 够 被 互相 替换 使 用 ,才能 体现 出 对 象 
多 态 性 的 价值 。 

“面向 接口 编程 ”是 设计 模式 中 最 重要 的 思想 ， 但 在 JavaScript 语 言 中 ,“ 面 向 接口 编程 ”的 
过 程 跟 主流 的 静态 类 型 语言 不 一 样 ， 因 此 ， 在 JavaScript 中 实现 设计 模式 的 过 程 与 在 一 些 我 们 熟 
悉 的 语言 中 实现 的 过 程 会 大 相 径 庭 。 


1.2 多 态 
“多 态 ” 一 词 源 于 希腊 文 polymorphism， 拆 开 来 看 是 poly ( 复数 ) + morph (形态 ) + ism， 
从 字面 上 我 们 可 以 理解 为 复数 形态 。 


多 态 的 实际 含义 是 : 同一 操作 作用 于 不 同 的 对 象 上 面 , 可 以 产生 不 同 的 解释 和 不 同 的 执行 结 
果 。 换 句 话 说 , 给 不 同 的 对 象 发 送 同一 个 消息 的 时 候 , 这 些 对 象 会 根据 这 个 消息 分 别 给 出 不 同 的 
反馈 。 


从 字面 上 来 理解 多 态 不 太 容 易 ， 下 面 我 们 来 举例 说 明 一 下 。 
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主人 家 里 养 了 两 只 动物 ， 分 别 是 一 只 网 和 一 只 鸡 ， 当 主人 向 它们 发 出 “ 叫 ” 的 命令 
时 ， 鸭 会 “嘎嘎 嘎 ” 地 叫 ， 而 鸡 会 “ 略 略 咯 ” 地 叫 。 这 两 只 动物 都 会 以 自己 的 方式 来 发 
出 叫 声 。 它 们 同样 “都 是 动物 ， 并 且 可 以 发 出 叫 声 "， 但 根据 主人 的 指令 ， 它 们 会 各 自 
发 出 不 同 的 叫 声 。 





其 实 ， 其 中 就 蕴含 了 多 态 的 思想 。 下 面 我 们 通过 代码 进行 具体 的 介绍 。 


1.2.1 一 段 “ 多 态 ” 的 JavaScript 代 码 
我 们 把 上 面 的 故事 用 JavaScript 代码 实现 如 下 : 


var makeSound = function( animal ){ 
if ( animal instanceof Duck ){ 
console.1og(“ 嘎 嘎嘎 ); 
}else if ( animal instanceof Chicken ){ 
console.10g(“ 咯 咯咯 ' ); 
} 


}; 


var Duck = function(){}; 
var Chicken = function(){}; 





makeSound( new Duck() ); // 嘎嘎 嘎 
makeSound( new Chicken() );  // 咯咯 咯 


这 段 代码 确实 体现 了 “多 态 性 ”， 当 我 们 分 别 向 鸭 和 鸡 发 出 “叫唤 ”的 消息 时 ， 它 们 根据 此 
消息 作出 了 各 自 不 同 的 反应 。 但 这 样 的 “多 态 性 ”是 无 法 令 人 满意 的 ， 如 果 后 来 又 增加 了 一 只 动 
物 ， 比 如 狗 ， 显然 狗 的 叫 声 是 “汪汪 汪 ”， 此 时 我 们 必须 得 改动 makeSound 函数 ， 才 能 让 狗 也 发 出 
叫 声 。 修 改 代码 总 是 危险 的 ,修改 的 地 方 越 多 , 程序 出 错 的 可 能 性 就 越 大 ,而且 当 动物 的 种 类 越 
来 越 多 时 ，makesound 有 可 能 变 成 一 个 巨大 的 函数 。 

多 态 背后 的 思想 是 将 “做 什么 ”和 “ 谁 去 做 以 及 怎样 去 做 ”分 离开 来 ， 也 就 是 将 “不 变 的 事 
物 ” 与 “可 能 改变 的 事物 ”分 离开 来 。 在 这 个 故事 中 ， 动 物 都 会 叫 ， 这 是 不 变 的 ， 但 是 不 同类 
型 的 动物 具体 怎么 叫 是 可 变 的 。 把 不 变 的 部 分 隔离 出 来 ,把 可 变 的 部 分 封装 起 来 ,这 给 予 了 我 们 
扩展 程序 的 能 力 ， 程 序 看 起 来 是 可 生长 的 ， 也 是 符合 开放 -封闭 原则 的 ， 相 对 于 修改 代码 来 说 ， 
仅仅 增加 代码 就 能 完成 同样 的 功能 ， 这 显然 优雅 和 安全 得 多 。 


1.2.2” ”对象 的 多 态 性 
下 面 是 改写 后 的 代码 ， 首 先 我 们 把 不 变 的 部 分 隔离 出 来 ， 那 就 是 所 有 的 动物 都 会 发 出 叫 声 : 


var makeSound = function( animal ){ 
animal.sound(); 


}; 
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然后 把 可 变 的 部 分 各 自封 装 起 来 ,我们 刚才 谈 到 的 多 态 性 实际 上 指 的 是 对 象 的 多 态 属 


var Duck = function(){} 











PT 


Duck.prototype.sound = function(){ 
console.log( ' 嘎 嘎嘎 ' ); 
}; 


var Chicken = function(){} 


Chicken.prototype.sound = function(){ 
console.1og(“ 咯 咯咯 " ); 


}; 
makeSound( new Duck() ); // 嘎嘎 嘎 
makeSound( new Chicken() ); // 咯咯 咯 





现在 我 们 向 鸭 和 鸡 都 发 出 “叫唤 ”的 消息 ,它们 接 到 消息 后 分 别 作 出 了 不 同 的 反应 。 如 果 有 
一 天 动物 世界 里 又 增加 了 一 只 狗 , 这 时 候 只 要 简单 地 追加 一 些 代 码 就 可 以 了 ,而 不 用 改动 以 前 的 
makeSound 国 数 ， 如 下 所 示 : 


var Dog = function(){} 





Dog.prototype.sound = function(){ 
console.log(“' 汪 汪汪 '" )) 


3 


makeSound( new Dog() ); // 汪汪 汪 


1.2.3 ”类 型 检查 和 多 态 
类 型 检查 是 在 表现 出 对 象 多 态 性 之 前 的 一 个 绕 不 开 的 话题 ， 但 JavaScript 是 一 门 不 必 进 行 类 
型 检查 的 动态 类 型 语言 , 为 了 真正 了 解 多 态 的 目的 , 我 们 需要 转 一 个 弯 , 从 一 门 静 态 类 型 语言 说 起 。 
我 们 在 1.1 节 已 经 说 明 过 静态 类 型 语言 在 编译 时 会 进行 类 型 匹配 检查 。 以 Java 为 例 , 由 于 在 
代码 编译 时 要 进行 严格 的 类 型 检查 , 所 以 不 能 给 变量 赋予 不 同类 型 的 值 , 这 种 类 型 检查 有 时候 会 
让 代码 显得 僵硬 ， 代 码 如 下 : 


String str; 



































str = "abc"; // 没有 问题 
str = 2; // 报错 


现在 我 们 花 试 把 上 面 让 鸭子 和 鸡 叫 唤 的 例子 换 成 Java 代码 : 
public class Duck { // 鸭子 类 
public void makeSound(){ 
System.out.pTintln(“ 嘎 嘎嘎 "”); 
} 


} 





public class Chicken { // 鸡 类 
public void makeSound(){ 
System.out.println(“" 咯 咯咯 "” ); 


public class AnimalSound { 
public void makeSound( Duck duck ){ // (1) 
duck.makeSound(); 
} 


} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Duck duck = new Duck(); 
animalSound.makeSound( duck ); // 输出 : 嘎嘎 嘎 
} 
} 


我 们 已 经 顺利 地 让 鸭子 可 以 发 出 叫 声 , 但 如 果 现 在 想 让 鸡 也 叫唤 起 来 , 我 们 发 现 这 是 一 件 不 
可 能 实现 的 事情 。 因 为 (1) 处 AnimalSound 类 的 makeSound 方法 ， 被 我 们 规定 为 只 能 接受 Duck 类 型 
的 参数 : 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound = new AnimalSound(); 
Chicken chicken = new Chicken(); 
animalSound.makeSound( chicken ); // 报错 ， 只 能 接受 Duck 类 型 的 参数 





】 
} 


某 些 时 候 ， 在 享受 静态 语言 类 型 检查 带 来 的 安全 性 的 同时 ， 我 们 亦 会 感觉 被 束缚 住 了 手脚 。 

为 了 解决 这 一 问题 , 静态 类 型 的 面向 对 象 语言 通常 被 设计 为 可 以 向 上 转型 : 当 给 一 个 类 变量 
赋值 时 ， 这 个 变量 的 类 型 既 可 以 使 用 这 个 类 本 身 ， 也 可 以 使 用 这 个 类 的 超 类 。 这 就 像 我 们 在 描述 
天 上 的 一 只 麻 稚 或 者 一 只 喜 更 时 ， 通 常 说 “一 只 麻 稚 在 飞 ” 或 者 “一 只 喜 竟 在 飞 ”。 但 如 果 想 忽 
略 它们 的 具体 类 型 ， 那 么 也 可 以 说 “一 只 鸟 在 飞 ”。 

同 理 , 当 Duck 对象 和 Chicken 对 象 的 类 型 都 被 隐藏 在 超 类 型 Animal 身后 ,Duck 对 象 和 Chicken 
对 象 就 能 被 交换 使 用 , 这 是 让 对 象 表现 出 多 态 性 的 必 经 之 路 ,而 多 态 性 的 表现 正 是 实现 众多 设计 
模式 的 目标 。 
























































1.2.4 ”使 用 继承 得 到 多 态 效果 
使 用 继承 来 得 到 多 态 效 果 , 是 让 对 象 表现 出 多 态 性 的 最 常用 手段 。 继 承 通常 包括 实现 继承 和 
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接口 继承 。 本 节 我 们 讨论 实现 继承 ， 接 口 继承 的 例子 请 参见 第 21 章 。 
我 们 先 创建 一 个 Animal 抽象 类 ， 再 分 别 让 Duck 和 Chicken 都 继承 自 Animal 抽象 类 ， 下 述 代 
码 中 (1) 处 和 (2) 处 的 赋值 语句 显然 是 成 立 的 ， 因 为 鸭子 和 鸡 也 是 动物 : 


public abstract class Animal { 
abstract void makeSound();  // 抽象 方法 
} 


public class Chicken extends Animal{ 
public void makeSound(){ 
System.out.pTintln(“ 咯 咯咯" ); 


} 


public class Duck extends Animal{ 
public void makeSound(){ 
System.out.pTintln(“ 嘎 嘎嘎 "”); 


} 


Animal duck = new Duck(); // (1) 
Animal chicken = new Chicken(); // (2) 




















现在 剩 下 的 就 是 让 AnimalSound 类 的 makeSound 方法 接受 Animal 类 型 的 参数 ， 而 不 是 具体 的 





Duck 类 型 或 者 Chicken 类 型 . 


public class AnimalSound{ 


public void makeSound( Animal animal ){ // 接受 Animal 类 型 的 参数 


animal .makeSound(); 


} 
} 


public class Test { 
public static void main( String args[] ){ 
AnimalSound animalSound= new AnimalSound (); 
Animal duck = new Duck(); 
Animal chicken = new Chicken(); 
animalSound.makeSound( duck ); // 输出 嘎嘎 嘎 


animalSound.makeSound( chicken ); // 输出 咯咯 咯 


1.2.5 JavaScript 的 多 态 


从 前 面 的 讲解 我 们 得 知 ， 多 态 的 思想 实际 上 是 把 “做 什么 ”和 “ 谁 去 做 ”分 离开 来 ， 要 实现 



































这 一 点 ,归根 结 底 先 要 消除 类 型 之 间 的 耦合 关系 。 如 果 类 型 之 间 的 耦合 关系 没有 被 消除 , 那么 我 





们 在 makesound 方 法 中 指定 了 发 出 叫 声 的 对 象 是 某 个 类 型 ， 
在 Java 中 ， 可 以 通过 向 上 转型 来 实现 多 态 。 

















它 就 不 可 能 


了 被 替换 为 男 外 一 个 











类 型 。 


1.2 多 态 9 





而 JavaScript 的 变量 类 型 在 运行 期 是 可 变 的 。 一 个 JavaScript 对 象 ， 既 可 以 表示 Duck 类 型 的 
对 象 ， 又 可 以 表示 Chicken 类 型 的 对 象 ， 这 意味 着 JavaScript 对 象 的 多 态 性 是 与 生 俱 来 的 。 

这 种 与 生 俱 来 的 多 态 性 并 不 难 解 释 。JavaScript 作为 一 门 动 态 类 型 语言 ， 它 在 编译 时 没有 类 型 
检查 的 过 程 , 既 没 有 检查 创建 的 对 象 类 型 , 又 没有 检查 传递 的 参数 类 型 ,在 1.2.2 节 的 代码 示例 中 ， 
我 们 既 可 以 往 makeSound 函数 里 传递 duck 对 象 当 作 参 数 ， 也 可 以 传递 chicken 对 象 当 作 参 数 。 

由 此 可 见 ， 某 一 种 动物 能 否 发 出 叫 声 ， 只 取决 于 它 有 没有 makeSound 方法 ， 而 不 取决 于 它 是 
否 是 某 种 类 型 的 对 象 ， 这 里 不 存在 任何 程度 上 的 “类 型 耦合 "。 这 正 是 我 们 从 上 一 节 的 鸭子 类 型 
中 领悟 的 道理 。 在 JavaScript 中 ， 并 不 需要 诸如 向 上 转型 之 类 的 技术 来 取得 多 态 的 效果 。 


1.2.6 多 态 在 面向 对 象 程序 设计 中 的 作用 


有 许多 人 认为 ， 多 态 是 面向 对 象 编程 语言 中 最 重要 的 技术 。 但 我 们 目前 还 很 难看 出 这 一 点 ， 
毕 况 大 部 分 人 都 不 关心 鸡 是 怎么 叫 的 , 也 不 想 知 道 鸭 是 怎么 叫 的 。 让 鸡 和 鸭 在 同一 个 消息 之 下 发 
出 不 同 的 叫 声 ， 这 跟 程序 员 有 什么 关系 呢 ? 


Martin Fowler 在 《 重 构 : 改善 既 有 代码 的 设计 》 里 写 到 : 
多 态 的 最 根本 好 处 在 于 ， 你 不 必 再 向 对 象 询 问 “ 你 是 什么 类 型 ”而 后 根据 得 到 的 答 















































案 调用 对 象 的 某 个 行为 一 你 只 管 调用 该 行为 就 是 了 ,其 他 的 一 切 多 态 机 制 都 会 为 你 安 
排 受 当 。 





换 句 话说 , 多 态 最 根本 的 作用 就 是 通过 把 过 程 化 的 条 件 分 支 语句 转化 为 对 象 的 多 态 性 , 从 而 
消除 这 些 条 件 分 支 语 句 。 
Martin Fowler 的 话 可 以 用 下 面 这 个 例子 很 好 地 诠释 : 


在 电影 的 拍摄 现场 ， 当 导演 喊 出 “action” 时 ， 主 角 开 始 背 台词 ， 照 明 师 负 责 打 灯 
光 ， 后 面 的 群众 演员 假装 中 枪 倒 地 ， 道 具 师 往 镜头 里 撒 上 雪花 。 在 得 到 同一 个 消息 时 ， 
每 个 对 象 都 知道 自己 应 该 做 什么 。 如 果 不 利 用 对 象 的 多 态 性 ， 而 是 用 面向 过 程 的 方式 来 
编写 这 一 段 代码 ， 那 么 相当 于 在 电影 开始 拍摄 之 后 ， 导 演 每 次 都 要 走 到 每 个 人 的 面前 ， 
确认 它们 的 职业 分 工 (类 型 )， 然 后 告诉 他 们 要 做 什么 。 如 果 映 射 到 程序 中 ， 那 么 程序 
中 将 充斥 着 条 件 分 支 语句 。 

















利用 对 象 的 多 态 性 ， 导 演 在 发 布 消息 时 ,就 不 必 考 虑 各 个 对 象 接 到 消息 后 应 该 做 什么 。 对 象 
应 该 做 什么 并 不 是 临时 决定 的 ,而 是 已 经 事先 约定 和 排练 完毕 的 。 每 个 对 象 应 该 做 什么 , 已 经 成 
为 了 该 对 象 的 一 个 方法 , 被 安装 在 对 象 的 内 部 ,每 个 对 象 负 责 它们 自己 的 行为 。 所 以 这 些 对 象 可 
以 根据 同一 个 消息 ， 有 条 不 麻 地 分 别 进行 各 自 的 工作 。 
将 行为 分 布 在 各 个 对 象 中 , 并 让 这 些 对 象 各 自负 责 自 己 的 行为 ,这 正 是 面向 对 象 设计 的 优点 。 
再 看 一 个 现实 开发 中 遇 到 的 例子 ， 这 个 例子 的 思想 和 动物 叫 声 的 故事 非常 相似 。 
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假设 我 们 要 编写 一 个 地 图 应 用 ， 现 在 有 两 家 可 选 的 地 图 API 提供 商 供 我 们 接 入 自己 的 应 月 

















目前 我 们 选择 的 是 谷歌 地 图 ， 谷歌 地 图 的 API 中 提供 了 show 方 法 ,负责 在 页 面 上 展示 整个 地 图 。 





示例 代码 如 下 : 


var googleMap = { 
show: function(){ 
console.log( ' 开 始 演 染 谷 歌 地 图 ' ); 


} 
}; 


var renderMap = function(){ 
googleMap. show(); 


renderMap(); ”// 输出 : 开始 泻 染 谷歌 地 图 


后 来 因为 某 些 原因 ， 要 把 谷歌 地 图 换 成 百度 地 图 ， 为 了 让 renderMap 画 
我 们 用 一 些 条 件 分 支 来 让 renderMap 函数 同时 支持 谷歌 地 图 和 百度 地 图 : 





var googleMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 谷歌 地 图 ” ); 
} 
}; 


var baiduMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 百度 地 图 ' ); 
} 
}; 


var renderMap = function( type ){ 
if ( type === 'google' ){ 
googleMap. show(); 
}else if ( type === 'baidu' ){ 
baiduMap. show(); 


Bs 


renderMap( 'google' ); // 输出 : 开始 泻 染 谷歌 地 图 
renderMap( 'baidu' ); // 输出 : 开始 泻 染 百度 地 图 








可 以 看 到 ， 虽 然 renderMap 函数 目前 保持 了 一 定 的 弹性 ， 但 这 种 弹性 是 很 脆弱 的 ， 
《 件 分 文 语句 。 





幸 换 成 搜 搜 地 图 ， 那 无 疑 必须 得 改动 renderMap 函数 ， 继 续 往 里 面 堆砌 条 
我 们 还 是 先 把 程序 中 相同 的 部 分 抽象 出 来 ， 那 就 是 显示 某 个 地 图 : 
var renderMap = function( map ){ 


if ( map.show instanceof Function ){ 
map. show(); 


’; 


函数 保持 一 


O 


定 的 弹性 ， 


一 旦 需要 


[we 
NN 
(Gy 





renderMap( googleMap ); // 输出 : 开始 演 染 谷歌 地 图 
renderMap( baiduMap ); // 输出 : 开始 演 染 百度 地 图 
现在 来 找 找 这 段 代 码 中 的 多 态 性 。 当 我 们 向 谷歌 地 图 对 象 和 百度 地 图 对 象 分 别 发 出 “展示 地 
图 ”的 消息 时 ， 会 分 别 调用 它们 的 show 方法 ， 就 会 产生 各 自 不 同 的 执行 结果 。 对 象 的 多 态 性 提 
示 我 们 ,“ 做 什么 ”和 “怎么 去 做 ”是 可 以 分 开 的 ， 即 使 以 后 增加 了 搜 搜 地 图 ，renderMap 函数 仍 
然 不 需要 做 任何 改变 ， 如 下 所 示 : 
var sosoMap = { 
show: function(){ 
console.1og(“ 开 始 泻 染 搜 搜 地 图 ' ); 
} 


























}; 
renderMap( sosoMap ); // 输出 : 开始 演 染 搜 搜 地 图 


在 这 个 例子 中 , 我 们 假设 每 个 地 图 API 提供 展示 地 图 的 方法 名 都 是 show, 在 实际 开发 中 也 许 
不 会 如 此 顺利 ， 这 时 候 可 以 借助 适 配 带 模 式 来 解决 问题 。 








1.2.7 设计 模式 与 多 态 


GoF 所 著 的 《设计 模式 》 一 书 的 副 书 名 是 “可 复 用 面向 对 象 软件 的 基础 "。 该 书 完全 是 从 面 
向 对 象 设 计 的 角度 出 发 的 , 通过 对 封装 、 继 承 、 多 态 、 组 合 等 技术 的 反复 使 用 ,提炼 出 一 些 可 重 
复 使 用 的 面向 对 象 设 计 技 巧 。 而 多 态 在 其 中 又 是 重 中 之 重 , 绝 大 部 分 设计 模式 的 实现 都 离 不 开 多 
态 性 的 思想 。 

拿 命令 模式 "来 说 ， 请 求 被 封装 在 一 些 命令 对 象 中 ， 这 使 得 命令 的 调用 者 和 命令 的 接收 者 可 
以 完全 解 耦 开 来 ， 当 调用 命令 的 execute 方 法 时 ， 不 同 的 命令 会 做 不 同 的 事情 ， 从 而 会 产生 不 同 
的 执行 结果 。 而 做 这 些 事情 的 过 程 是 早已 被 封装 在 命令 对 象 内 部 的 ， 作 为 调用 命令 的 客户 ,根本 
不 必 去 关心 命令 执行 的 具体 过 程 。 

在 组 合 模式 "中 ， 多 态 性 使 得 客户 可 以 完全 忽略 组 合 对 象 和 叶 节 点 对 象 之 前 的 区 别 ， 这 正 是 
组 合 模式 最 大 的 作用 所 在 。 对 组 合 对 象 和 时节 点 对 象 发 出 同一 个 消息 的 时 候 , 它们 会 各 自 做 自己 
应 该 做 的 事情 , 组 合 对 象 把 消息 继续 转发 给 下 面 的 叶 节 点 对 象 , 叶 节 点 对 象 则 会 对 这 些 消息 作出 
真实 的 反馈 。 

在 策略 模式 中，Context 并 没有 执行 算法 的 能 力 ， 而 是 把 这 个 职责 委托 给 了 某 个 策略 对 象 。 
每 个 策略 对 象 负责 的 算法 已 被 各 自封 装 在 对 象 内 部 。 当 我 们 对 这 些 策略 对 象 发 出 “计算 ”的 消息 
时 ， 它 们 会 返回 各 自 不 同 的 计算 结果 。 














































































































GD 参见 第 9 章 。 
@) 参见 第 10 章 。 
G@) 参见 第 5 章 。 
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在 JavaScript 这 种 将 函数 作为 一 等 对 象 的 语言 


且 能 够 被 四 处 传递 。 当 我 们 对 一 些 函 数 发 出 “调用 ” 




















， 了 因数 本 身 也 是 对 象 ,函数 用 来 封装 行为 并 
的 消息 时 ， 这 些 函 数 会 返回 不 同 的 执行 结 











果 , 这 是 “多 态 性 ”的 一 种 体现 , 也 是 很 多 设计 模式 在 JavaScript 中 可 以 用 高 阶 函 数 来 代替 实现 


的 原因 。 


1.3 封装 


封装 的 目的 是 将 信息 隐藏 。 一 般 而 言 ， 我 们 讨论 
































的 封装 是 封装 数据 和 封装 实现 。 这 一 节 将 讨 








论 更 广义 的 封装 ， 不 仅 包 括 封装 数据 和 封装 实现 ， 还 包括 封装 类 型 和 封装 变化 。 


1.3.1 封装 数据 
































在 许多 语言 的 对 象 系统 中 , 封装 数据 是 由 语法 解析 来 实现 的 ,这 些 语 言 也 许 提 供 了 private、 











public、protected 等 关键 字 来 提供 不 同 的 访问 权限 。 








但 JavaScript 并 没有 提供 对 这 些 关键 字 的 支持 ,我 们 只 能 依赖 变量 的 作用 域 来 实现 封装 特性 ， 





而 且 只 能 模拟 出 public 和 private 这 两 种 封装 性 。 














除了 ECMAScript 6 中 提供 的 let 之 外 ， 一 般 我 们 通过 函数 来 创建 作用 域 : 


var myObject = (function(){ 
Var _name = 'sven'; // 私有 (private ) 变量 
return { 

















getName: function(){ // 公开 (public ) 方法 


return _ name; 


} 
} 
])); 


console.1og( my0bject.getName() ); // 输出 : sven 


console.log( myObject. name ) // 输出 : undefined 

















另外 值得 一 提 的 是 ， 在 ECAMScript 6 中 ， 还 可 以 通过 Symbol 创 建 私 有 属性 。 
详情 可 参阅 https:/Wgithub.conmylukehoban/es6features ， 二 维 码 见 右边 。 


1.3.2 ”封装 实现 


























上 一 节 描 述 的 封装 ， 指 的 是 数据 层面 的 封装 。 有 时 候 我 们 喜欢 把 封装 等 同 于 封装 数据 , 但 这 

















是 一 种 比较 狭义 的 定义 。 








封装 的 目的 是 将 信息 隐藏 ， 封 装 应 该 被 视 为 “任何 形式 的 封装 ”， 也 就 是 说 ， 封 装 不 仅仅 是 


隐藏 数据 ， 还 包括 隐藏 实现 细节 、 设 计 细节 以 及 隐藏 对 象 的 类 型 等 。 











从 封装 实现 细节 来 讲 , 封装 使 得 对 象 内 部 的 变化 对 其 他 对 象 而 言 是 透明 的 , 也 就 是 不 可 见 的 。 
对 象 对 它 自 己 的 行为 负责 。 其 他 对 象 或 者 用 户 都 不 关心 它 的 内 部 实现 。 封 装 使 得 对 象 之 间 的 耦合 








1.3 封装 13 

















变 松散 ,对象 之 间 只 通过 暴露 的 API 接 口 来 通信 。 当 我 们 修改 一 个 对 象 时 ,可 以 随意 地 修改 它 的 
内 部 实现 ， 只 要 对 外 的 接口 没有 变化 ， 就 不 会 影响 到 程序 的 其 他 功能 。 

封装 实现 细节 的 例子 非常 之 多 。 拿 迭代 器 来 说 明 , 迭代 器 的 作用 是 在 不 暴露 一 个 聚合 对 象 的 
内 部 表示 的 前 提 下 ， 提 供 一 种 方式 来 顺序 访问 这 个 聚合 对 象 。 我 们 编写 了 一 个 each 函数 ， 它 的 
作用 就 是 过 历 一 个 聚合 对 象 ， 使 用 这 个 each 函数 的 人 不 用 关心 它 的 内 部 是 怎样 实现 的 ， 只 要 它 
提供 的 功能 正确 便 可 以 。 即 使 each 函数 修改 了 内 部 源 代 码 ， 只 要 对 外 的 接口 或 者 调用 方式 没有 
变化 ， 用 户 就 不 用 关心 它 内 部 实现 的 改变 。 






























































1.3.3 封装 类 型 


封装 类 型 是 静态 类 型 语言 中 一 种 重要 的 封装 方式 。 一 般 而 言 , 封装 类 型 是 通过 抽象 类 和 接口 
来 进行 的 "。 把 对 象 的 真正 类 型 隐藏 在 抽象 类 或 者 接口 之 后 ， 相 比 对 象 的 类 型 ， 客 户 更 关心 对 象 
的 行为 。 在 许多 静态 语言 的 设计 模式 中 , 想方设法 地 去 隐藏 对 象 的 类 型 ， 也 是 促使 这 些 模式 证 生 
的 原因 之 一 。 比 如 工矿 方法 模式 、 组 合 模式 等 。 

当然 在 JavaScript 中 , 并 没有 对 抽象 类 和 接口 的 支持 。JavaScript 本 身 也 是 一 门类 型 模糊 的 语 
言 。 在 封装 类 型 方面 JavaScript 没有 能 力 ， 也 没有 必要 做 得 更 多 。 对 于 JavaScript 的 设计 模式 实 
现 来 说 ,不 区 分 类 型 是 一 种 失色 ,也 可 以 说 是 一 种 解脱 。 在 后 面 章节 的 学 习 中 , 我 们 可 以 慢 慢 了 
解 这 一 点 。 

























































































1.3.4 封装 变化 
从 设计 模式 的 角度 出 发 ， 封 装 在 更 重要 的 层面 体现 为 封装 变化 。 
《设计 模式 》 一 书 曾 提 到 如 下 文字 : 
“考虑 你 的 设计 中 哪些 地 方 可 能 变化 , 这 种 方式 与 关注 会 导致 重新 设计 的 原因 相反 。 


它 不 是 考虑 什么 时 候 会 迫使 你 的 设计 改变 ,而 是 考虑 你 怎样 才能 够 在 不 重新 设计 的 情况 
下 进行 改变 。 这 里 的 关键 在 于 封装 发 生变 化 的 概念 ， 这 是 许多 设计 模式 的 主题 。” 








这 段 文字 即 是 《设计 模式 》 提 到 的 “找到 变化 并 封装 之 "。《 设 计 模式 》 一 书 中 共 归 纳 总 结 了 23 
种 设计 模式 。 从 意图 上 区 分 , 这 23 种 设计 模式 分 别 被 划分 为 创建 型 模式 、 结 构 型 模式 和 行为 型 模式 。 

拿 创建 型 模式 来 说 ,要 创建 一 个 对 象 , 是 一 种 抽象 行为 ， 而 具体 创建 什么 对 象 则 是 可 以 变化 
的 ， 创 建 型 模式 的 目的 就 是 封装 创建 对 象 的 变化 。 而 结构 型 模式 封装 的 是 对 象 之 间 的 组 合 关系 。 
行为 型 模式 封装 的 是 对 象 的 行为 变化 。 

通过 封装 变化 的 方式 , 把 系统 中 稳定 不 变 的 部 分 和 容易 变化 的 部 分 隔离 开 来 , 在 系统 的 演变 
过 程 中 , 我 们 只 需要 蔡 换 那 些 容易 变化 的 部 分 ,如果 这 些 部 分 是 已 经 封装 好 的 ， 替 换 起 来 也 相对 






































中 详情 可 参阅 1.2 节 中 的 Animal 示例 。 
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容易 。 这 可 以 最 大 程度 地 保证 程序 的 稳定 性 和 可 扩展 性 。 


从 《设计 模式 》 副 标题 “可 复 用 面向 对 象 软 件 的 基础 ”可 以 知道 ， 这 本 书 理应 教 我 们 如 何 编 
写 可 复 用 的 面向 对 象 程序 。 这 本 书 把 大 多 数 笔墨 都 放 在 如 何 封装 变化 上 面 , 这 跟 编写 可 复 用 的 面 
向 对 象 程序 是 不 矛盾 的 。 当 我 们 想 办 法 把 程序 中 变化 的 部 分 封装 好 之 后 , 剩 下 的 即 是 稳定 而 可 复 
用 的 部 分 了 。 


1.4 ”原型 模式 和 基于 原型 继承 的 JavaScript 对 象 系统 


在 Brendan Eich 为 JavaScript 设计 面向 对 象 系统 时 , 借鉴 了 Self 和 Smalltalk 这 两 门 基 于 原型 
的 语言 。 之 所 以 选择 基于 原型 的 面向 对 象 系统 ， 并 不 是 因为 时 间 勿 忙 ， 它 设计 起 来 相对 简单 ， 而 
是 因为 从 一 开始 Brendan Eich 就 没有 打算 在 JavaScript 中 加 入 类 的 概念 。 

在 以 类 为 中 心 的 面向 对 象 编程 语言 中 , 类 和 对 象 的 关系 可 以 想象 成 铸模 和 铸件 的 关系 , 对象 
总 是 从 类 中 创建 而 来 。 而 在 原型 编程 的 思想 中 , 类 并 不 是 必需 的 , 对 象 未 必需 要 从 类 中 创建 而 来 ， 
一 个 对 象 是 通过 克隆 另外 一 个 对 象 所 得 到 的 。 就 像 电影 《第 六 日 》 一 样 ， 通 过 克隆 可 以 创造 另外 
一 个 一 模 一 样 的 人 ， 而 且 本 体 和 克隆 体 看 不 出 任何 区 别 。 

原型 模式 不 单 是 一 种 设计 模式 ， 也 被 称 为 一 种 编程 泛 型 。 

本 节 我 们 将 首先 学 习 第 一 个 设计 模式 一 一 原型 模式 。 随 后 会 了 解 基于 原型 的 Io 语言 ， 借 助 
对 Io 语言 的 了 解 ， 我们 对 JavaScript 的 面向 对 象 系统 也 将 有 更 深 的 认识 。 在 本 节 的 最 后 , 我 们 将 
详细 了 解 JavaScript 语 言 如 何 通 过 原型 来 构建 一 个 面向 对 象 系统 。 


1.4.1 使 用 克隆 的 原型 模式 


从 设计 模式 的 角度 讲 ， 原 型 模式 是 用 于 创建 对 象 的 一 种 模式 ， 如 果 我 们 想 要 创建 一 个 对 象 ， 
一 种 方法 是 先 指 定 它 的 类 型 ， 然 后 通过 类 来 创建 这 个 对 象 。 原 型 模式 选择 了 另外 一 种 方式 , 我 们 
不 再 关心 对 象 的 具体 类 型 ， 而 是 找到 一 个 对 象 ， 然 后 通过 克隆 来 创建 一 个 一 模 一 样 的 对 象 。 

既然 原型 模式 是 通过 克隆 来 创建 对 象 的 , 那么 很 自然 地 会 想到 ,如 果 需 要 一 个 跟 某 个 对 象 
模 一 样 的 对 象 ， 就 可 以 使 用 原型 模式 。 

假设 我 们 在 编写 一 个 飞机 大 战 的 网 页 游戏 。 某 种 飞机 拥有 分 身 技能 ， 当 它 使 用 分 身 技能 的 时 
候 ， 要 在 页 面 中 创建 一 些 跟 它 一 模 一 样 的 飞机 。 如 果 不 使 用 原型 模式 ， 那么 在 创建 分 身 之 前 ,无 
疑 必须 先 保存 该 飞机 的 当前 血 量 、 炮 弹 等 级 、 防 御 等 级 等 信息 ， 随 后 将 这 些 信息 设置 到 新 创建 的 
飞机 上 面 ， 这 样 才能 得 到 一 架 一 模 一 样 的 新 飞机 。 

如 果 使 用 原型 模式 ， 我 们 只 需要 调用 负责 克隆 的 方法 ， 便 能 完成 同样 的 功能 。 

原型 模式 的 实现 关键 ,是 语言 本 身 是 否 提 供 了 clone 方 法 ,ECMAScript 5 提供 了 object .create 
方法 ， 可 以 用 来 克隆 对 象 。 代 码 如 下 : 
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var Plane = function(){ 
this.blood = 100; 
this.attackLevel = 1; 
this.defenseLevel = 1; 


此 


var plane = new Plane(); 
plane.blood = 500; 

plane.attackLevel = 10; 
plane.defenseLevel = 7; 


var cloneplane = Object.create( plane ); 
console.log( clonePlane ); // 输出 : 0bject {blood: 500, attackLevel: 10, defenseLevel: 7} 


在 不 支持 0bject.create 方 法 的 浏览 器 中 ， 则 可 以 使 用 以 下 代码 : 


Object.create = Object.create || function( obj ){ 
var F = function(){}; 
F.prototype = obj; 


return new F(); 


1.4.2 ”克隆 是 创建 对 象 的 手段 


通过 上 一 节 的 代码 , 我 们 看 到 了 如 何 通过 原型 模式 来 克隆 出 一 个 一 模 一 样 的 对 象 。 但 原型 模 
式 的 真正 目的 并 非 在 于 需要 得 到 一 个 一 模 一 样 的 对 象 , 而 是 提供 了 一 种 便捷 的 方式 去 创建 某 个 类 
型 的 对 象 ， 克 隆 只 是 创建 这 个 对 象 的 过 程 和 手段 。 

在 用 Java 等 静态 类 型 语言 编写 程序 的 时 候 ， 类 型 之 间 的 解 看 非常 重要 。 依 赖 倒置 原则 提醒 
我 们 创建 对 象 的 时 候 要 避免 依赖 具体 类 型 ， 而 用 new XXX 创建 对 象 的 方式 显得 很 僵硬 。 工 厂 方法 
模式 和 抽象 工厂 模式 可 以 帮助 我 们 解决 这 个 问题 , 但 这 两 个 模式 会 带 来 许多 跟 产 品类 平行 的 工厂 
类 层次 ， 也 会 增加 很 多 额外 的 代码 。 

原型 模式 提供 了 另外 一 种 创建 对 象 的 方式 , 通过 克隆 对 象 , 我 们 就 不 用 再 关心 对 象 的 具体 类 
型 名 字 。 这 就 像 一 个 仙女 要 送 给 三 岁 小 女孩 生日 礼物 , 虽然 小 女孩 可 能 还 不 知道 飞机 或 者 船 怎 么 
说 ， 但 她 可 以 指 着 商店 橱柜 里 的 飞机 模型 说 “我 要 这 个 ”。 

当然 在 JavaScript 这 种 类 型 模糊 的 语言 中 ， 创 建 对 象 非常 容易 ， 也 不 存在 类 型 耦合 的 问题 。 
从 设计 模式 的 角度 来 讲 ， 原 型 模式 的 意义 并 不 算 大 。 但 JavaScript 本 身 是 一 门 基于 原型 的 面向 对 
象 语言 ， 它 的 对 象 系统 就 是 使 用 原型 模式 来 搭建 的 ， 在 这 里 称 之 为 原型 编程 范 型 也 许 更 合适 。 






















































































1.4.3 ”体验 lo 语言 


前 面 说 过 ， 原 型 模式 不 仅仅 是 一 种 设计 模式 ， 也 是 一 种 编程 范 型 。JavaScript 就 是 使 用 原型 
模式 来 搭建 整个 面向 对 象 系统 的 。 在 JavaScript 语 言 中 不 存在 类 的 概念 ， 对 象 也 并 非 从 类 中 创建 
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出 来 的 ， 所 有 的 JavaScript 对 象 都 是 从 某 个 对 象 上 克隆 而 来 的 。 
对 于 习惯 了 以 类 为 中 心 语言 的 人 来 说 , 也 许 一 时 不 容易 理解 这 种 基于 原型 的 语言 。 即 使 是 对 
于 JavaScript 语 言 的 熟练 使 用 者 而 言 ， 也 可 能 会 有 一 种 “不 识 庐 山 真面目 ， 只 缘 身 在 此 山中 ”的 
感觉 。 事实 上 ,使 用 原型 模式 来 构造 面向 对 象 系统 的 语言 远 非 仅 有 JavaScript 一 家 。 
JavaScript 基于 原型 的 面向 对 象 系统 参考 了 Self 语言 和 Smalltalk 语言 ， 为 了 搞 清 JavaScript 
中 的 原型 , 我们 本 该 寻根 溯源 去 瞧 瞧 这 两 门 语言 。 但 由 于 这 两 门 语言 距离 现在 实在 太 遥 远 ,， 我们 
不 妨 转 而 了 解 一 下 另外 一 种 轻巧 又 基于 原型 的 语言 一 一 Io 语言 。 
Io 语 言 在 2002 年 由 Steve Dekorte 发 明 。 可 以 从 http:/iolanguage.com 下 载 到 Io 语言 的 解释 屁 ， 
装 好 之 后 打开 Io 解释 器 ， 输 入 经 典 的 “Hello World” 程 序 。 解 释 器 打印 出 了 Hello World 的 字 




































































误 灶 


， 这 说 明 我 们 已 经 可 以 使 用 Io 语言 来 编写 一 些小 程序 了 ， 如 图 1-1 所 示 。 


Io 291109965 
Io> "Hello World’’ print 
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Hello World==> Hello World 
Io> 





图 1-1 

作为 一 门 基于 原型 的 语言 ，Io 中 同样 没有 类 的 概念 ， 每 一 个 对 象 都 是 基于 另外 一 个 对 象 的 
克隆 。 

就 像 吸 血 鬼 的 故事 里 必然 有 一 个 吸血 鬼 祖 先 一 样 ， 既 然 每 个 对 象 都 是 由 其 他 对 象 克隆 而 来 
的 ， 那么 我 们 猜测 Io 语言 本 身 至 少 要 提供 一 个 根 对 象 ， 其 他 对 象 都 发 源 于 这 个 根 对 象 。 这 个 猜 
测 是 正确 的 ,在 Io 中 ， 根 对 象 名 为 Object。 

这 一 节 我 们 依然 拿 动 物 世界 的 例子 来 讲解 To 语言。 在 下 面 的 代码 中 ,通过 克隆 根 对 象 0bject， 
就 可 以 得 到 另外 一 个 对 象 Animnal。 虽 然 Animal 是 以 大 写 开 头 的 ， 但 是 记 住 Io 中 没有 类 ，Animal 
跟 所 有 的 数据 一 样 都 是 对 象 。 

Animal := 0bject clone // 克隆 动物 对 象 

现在 通过 克隆 根 对 象 0bject 得 到 了 一 个 新 的 Animal 对 象 ， 所 以 0bject 就 被 称 为 Animal 的 原 
型 。 目 前 Animal 对 象 和 它 的 原型 0bject 对 象 一 模 一 样 ， 还 没有 任何 属于 它 自己 方法 和 能 力 。 我 
们 假设 在 Io 的 世界 里 , 所 有 的 动物 都 会 发 出 叫 声 , 那么 现在 就 给 Animal 对 象 添 加 makeSsound 方法 
吧 。 代 码 如 下 : 


Animal makeSound := method( "animal makeSound " print ); 


好 了 ,现在 所 有 的 动物 都 能 够 发 出 叫 声 了 ,那么 再 来 继续 创建 一 个 Dog 对 象 . 显 而 易 见 ,Animal 
对 象 可 以 作为 Dog 对 象 的 原型 ，Dog 对 象 从 Animal 对 象 元 隆 而 来 : 


Dog := Animal clone 


可 以 确定 ，Dog 一 定 懂得 怎么 吃食 物 ， 所 以 接 下 来 给 Dog 对 象 添加 eat 方法 : 
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Dog eat = method( "dog eat " print ); 


现在 已 经 完成 了 整个 动物 世界 的 构建 , 通过 一 次 次 克隆 , Io 的 对 象 世 界 里 不 再 只 有 形 单 影 只 
的 根 对 象 bbject ， 而 是 多 了 两 个 新 的 对 象 : Animal 对 象 和 Dog 对 象 。 其 中 Dog 的 原型 是 Animal， 
Animal 对 象 的 原型 是 0bject。 最 后 我 们 来 测试 Animal 对 象 和 Dog 对 象 的 功能 。 

尝试 调用 Animal 的 makeSound 方法， 可 以 看 到 ， 动 物 顺利 发 出 了 叫 声 : 
Animal makeSound // 输出 : animal makeSound 
然后 再 调用 Dog 的 eat 方法 ,同样 我 们 也 看 到 了 预期 的 结果 : 


Dog eat  ”// 输出 : dog eat 


















































1.4.4 ”原型 编程 范 型 的 一 些 规则 


从 上 一 节 的 讲解 中 ， 我 们 看 到 了 如 何在 Io 语言 中 从 无 到 有 地 创建 一 些 对 象 。 跟 使 用 “类 ” 
的 语言 不 一 样 的 地 方 是 , Io 语言 中 最 初 只 有 一 个 根 对 象 bbject,， 其 他 所 有 的 对 象 都 克隆 自 另 外 一 
个 对 象 。 如 果 A 对 象 是 从 B 对 象 克隆 而 来 的 ， 那 么 B 对 象 就 是 A 对 象 的 原型 。 

在 上 一 小 节 的 例子 中 , 0bject 是 Animal 的 原型 ， 而 Animal 是 Dog 的 原型 , 它们 之 间 形 成 了 一 
条 原型 链 。 这 个 原型 链 是 很 有 用 处 的 ， 当 我 们 尝试 调用 Dog 对象 的 某 个 方法 时 ， 而 它 本 身 却 没有 
这 个 方法 ,那么 Dog 对 象 会 把 这 个 请 求 委托 给 它 的 原型 Animal 对 象 ， 如 果 Animal 对 象 也 没有 这 
属性 ， 那 么 请 求 会 顺 着 原型 链 继续 被 委托 给 Animal 对 象 的 原型 0bject 对 象 ， 这 样 一 来 便 能 得 
到 继承 的 效果 ， 看 起 来 就 像 Animal 是 Dog 的 “ 父 类 ”，0bject 是 Animal 的 “ 父 类 ”。 

这 个 机 制 并 不 复杂 ， 却 非常 强大 ，Io 和 JavaScript 一 样 ， 基 于 原型 链 的 委托 机 制 就 是 原型 继 
承 的 本 质 。 

我 们 来 进行 一 些 测试 。 在 Io 的 解释 器 中 执行 Dog makeSound 时 ，Dog 对 象 并 没有 makeSound 方 
法 , 于 是 把 请 求 委 托 给 了 它 的 原型 Animal 对 象 ， 而 Animal 对 象 是 有 makeSound 方法 的 , 所 以 该 条 
语句 可 以 顺利 得 到 输出 ， 如 图 1-2 所 示 。 

Io> Dog makeSound 
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图 1-2 
现在 我 们 明白 了 原型 编程 中 的 一 个 重要 特性 ， 即 当 对 象 无 法 响应 某 个 请 求 时 , 会 把 该 请 求 委 
托 给 它 自己 的 原型 。 
最 后 整理 一 下 本 节 的 描述 ， 我 们 可 以 发 现 原型 编程 范 型 至 少 包 括 以 下 基本 规则 。 


口 所 有 的 数据 都 是 对 象 。 
口 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 。 
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口 对 象 会 记 住 它 的 原型 。 
口 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 





























这 个 请 求 委 托 给 它 自己 的 原型 。 





[二 


1.4.5 _ JavaScript 中 的 原型 继承 


刚刚 我 们 已 经 体验 过 同样 是 基于 原型 编程 的 Io 语言 ， 也 已 经 了 解 了 在 Io 语言 中 如 何 通 过 原 
型 链 来 实现 对 象 之 间 的 继承 关系 。 在 原型 继承 方面 ，JavaScript 的 实现 原理 和 Io 语言 非常 相似 ， 
JavaScript 也 同样 遵守 这 些 原 型 编程 的 基本 规则 。 
口 所 有 的 数据 都 是 对 象 。 
口 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 。 
口 对 象 会 记 住 它 的 原型 。 
口 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 把 这 个 请 求 委 托 给 它 自 己 的 原型 。 

下 面 我 们 来 分 别 讨论 JavaScript 是 如 何在 这 些 规则 的 基础 上 来 构建 它 的 对 象 系统 的 。 

1. 所 有 的 数据 都 是 对 象 

JavaScript 在 设计 的 时 候 ， 模 仿 Java 引入 了 两 套 类 型 机 制 : 基本 类 型 和 对 象 类 型 。 基 本 类 型 
包括 undefined、number 、boolean 、string、function 、object。 从 现在 看 来 ， 这 并 不 是 一 个 好 的 
想法 。 

按照 JavaScript 设计 者 的 本 意 ， 除 了 undefined 之 外 ， 一 切 都 应 是 对 象 。 为 了 实现 这 一 目标 ， 
number 、boolean、string 这 几 种 基本 类 型 数据 也 可 以 通过 “包装 类 ”的 方式 变 成 对 象 类 型 数据 来 
处 理 。 

我 们 不 能 说 在 JavaScript 中 所 有 的 数据 都 是 对 象 ， 但 可 以 说 绝 大 部 分 数据 都 是 对 象 。 那 么 相 
信 在 JavaScript 中 也 一 定 会 有 一 个 根 对 象 存在 ， 这 些 对 象 追 根 溯源 都 来 源 于 这 个 根 对 象 。 
事实 上 ，JavaScript 中 的 根 对 象 是 0bject.prototype 对 象 。0bject.prototype 对 象 是 一 个 空 的 
对 象 。 我 们 在 JavaScript 遇 到 的 每 个 对 象 ， 实 际 上 都 是 从 0bject.prototype 对 象 克隆 而 来 的 ， 
0bject .prototype 对 象 就 是 它们 的 原型 。 比 如 下 面 的 obj1 对 象 和 obj2 对 象 


var obj1 = new Object(); 
var obj2 = {}; 


可 以 利用 ECMAScript 5 提供 的 0bject.getPrototype0f 来 查看 这 两 个 对 象 的 原型 ; 













































































console.1og( Object.getPrototypeOf( obj1 
console.1og( Object.getPrototypeOf( obj2 


2. 要 得 到 一 个 对 象 ， 不 是 通过 实例 化 类 ， 而 是 找到 一 个 对 象 作为 原型 并 克隆 它 


在 Io 语言 中 ， 克 隆 一 个 对 象 的 动作 非常 明显 ， 我 们 可 以 在 代码 中 清晰 地 看 到 clone 的 过 程 。 
比如 以 下 代码 : 


= Object.prototype ); // 输出 : true 


) == 
) === Object.prototype ); // 输出 : true 
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Dog := Animal clone 


但 在 JavaScript 语言 里 ， 我 们 并 不 需要 关心 克隆 的 细节 ， 因 为 这 是 引擎 内 部 负责 实现 的 。 我 
们 所 需要 做 的 只 是 显 式 地 调用 var obj1 = new 0bject() 或 者 var obj2 = {}。 此 时 ， 引 警 内 部 会 从 
0bject .prototype 上 面 克隆 一 个 对 象 出 来 ， 我 们 最 终 得 到 的 就 是 这 个 对 象 。 

再 来 看 看 如 何 用 new 运算 符 从 构造 器 中 得 到 一 个 对 象 ， 下 面 的 代码 我 们 再 熟悉 不 过 了 : 


function Person( name ){ 
this.name = name; 

















}; 


Person.prototype.getName = function(){ 
return this.name; 

2 

var a = new Person( 'sven' ) 

console.log( a.name ); // 输出 : sven 


console.log( a.getName() ); // 输出 : sven 
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出 : true 


在 JavaScript 中 没有 类 的 概念 , 这 句 话 我 们 已 经 重复 过 很 多 次 了 。 但 刚才 不 是 明明 调用 了 new 
Person() 吗 ? 

在 这 里 Person 并 不 是 类 ， 而 是 函数 构造 器 ，JavaScript 的 函数 既 可 以 作为 普通 函数 被 调用 ， 
也 可 以 作为 构造 器 被 调用 。 当 使 用 new 运算 符 来 调用 函数 时 ， 此 时 的 函数 就 是 一 个 构造 器 。 用 
new 运算 符 来 创建 对 象 的 过 程 ， 实 际 上 也 只 是 先 克 隆 0bject.prototype 对 象 ， 再 进行 一 些 其 他 额 
外 操作 的 过 程 。" 

在 Chrome 和 Firefox 等 向 外 暴露 了 对 象 _proto 属性 的 浏览 器 下 ， i 
码 来 理解 new 运算 的 过 程 : 


function Person( name ){ 
this.name = name; 























}; 


Person.prototype.getName = function(){ 
return this.name; 


Bs 


var objectFactory = function(){ 
var obj = new Object(), // 从 0bject.prototype 上 克隆 一 个 空 的 对 象 
Constructor = [].shift.call( arguments ); // 取得 外 部 传 入 的 构造 器 ， 此 例 是 Person 





GD JavaScript 是 通过 克隆 0bject.prototype 来 得 到 新 的 对 象 , 但 实际 上 并 不 是 每 次 都 真正 地 克隆 了 一 个 新 的 对 象 。 从 
内 存 方面 的 考虑 出 发 ，JavaScript 还 做 了 一 些 额外 的 处 理 ， 具 体 细 节 可 以 参阅 周 爱民 老师 编著 的 《JavaScript 语言 
精髓 与 编程 实践 》 这 里 不 做 深入 讨论 ,我们 暂且 把 创建 对 象 的 过 程 看 成 完 完全 全 的 克隆 。 
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obj. proto = Constructor.prototype; // 指向 正确 的 原型 
var ret = Constructor.apply( obj, arguments ); // 借用 外 部 传 入 的 构造 器 给 obj 设置 属性 


return typeof ret === 'object' ? ret : obj; // 确保 构造 器 总 是 会 返回 一 个 对 象 


}; 
var a = objectFactory( Person, 'sven' ); 


console.log( a.name ); // 输出 : sven 
console.log( a.getName() ); // 输出 : sven 
console.log( Object.getPrototypeOf( a ) === Person.prototype ); // 输出 : true 


我 们 看 到 ,分别 调用 下 面 两 句 代码 产生 了 一 样 的 结 


var a 
var a 








objectFactory( A, 'sven' ); 
new A( 'sven' ); 

3. 对 象 会 记 住 它 的 原型 

如 果 请 求 可 以 在 一 个 链条 中 依次 往 后 传递 ,那么 每 个 节点 都 必须 知道 它 的 下 一 个 节点 。 同 理 ， 
要 完成 lo 语言 或 者 JavaScript 语 言 中 的 原型 链 查 找 机 制 ,每 个 对 象 至 少 应 该 先 记 住 它 自己 的 原型 。 

目前 我 们 一 直 在 讨论 “对 象 的 原型 ”， 就 JavaScript 的 真正 实现 来 说 ， 其 实 并 不 能 说 对 象 有 
原型 ， 而 只 能 说 对 象 的 构造 器 有 原型 。 对 于 “对 象 把 请 求 委托 给 它 自 己 的 原型 ”这 句 话 ， 更 好 
的 说 法 是 对 象 把 请 求 委 托 给 它 的 构造 器 的 原型 。 那 么 对 象 如 何 把 请 求 顺利 地 转交 给 它 的 构造 器 
的 原型 呢 ? 

JavaScript 给 对 象 提供 了 一 个 名 为 _proto_ 的 隐藏 属性 ， 某 个 对 和 象 的 _proto_ 属性 默认 会 指 
癌 它 的 构造 磊 的 原型 对 象 ， 即 {Constructor}.prototype。 在 一 些 浏览 器 中 ， _proto_ 被 公开 出 来 ， 
我 们 可 以 在 Chrome 或 者 Firefox 上 用 这 段 代 码 来 验证 : 


var a = new Object(); 
console.log ( a. proto === Object.prototype ); // 输出 : true 


实际 上 ，_proto_ 就 是 对 象 跟 “对 象 构 造 吉 的 原型 ”联系 起 来 的 纽带 。 正 因为 对 象 要 通过 
proto_ 属 性 来 记 住 它 的 构造 器 的 原型 ， 所 以 我 们 用 上 一 节 的 objectFactory 国 数 来 模拟 用 new 
创建 对 象 时 ， 需要 手动 给 obj 对 象 设置 正确 的 _proto_ 指 向 。 

obj._proto = Constructor.prototype; 

通过 这 人 句 代 码 ,我 们 让 obj. proto “指向 Person.prototype, 而 不 是 原来 的 0bject.prototype。 

4. 如 果 对 象 无 法 响应 某 个 请 求 ， 它 会 把 这 个 请 求 委 托 给 它 的 构造 器 的 原型 

这 条 规则 即 是 原型 继承 的 精髓 所 在 。 从 对 Io 语言 的 学 习 中 ， 我们 已 经 了 解 到 ， 当 一 个 对 象 
无 法 响应 某 个 请 求 的 时 候 , 它 会 顺 着 原型 链 把 请 求 传递 下 去 , 直到 遇 到 一 个 可 以 处 理 该 请 求 的 对 
象 为 止 。 
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JavaScript 的 克隆 跟 Io 语言 还 有 点 不 一 样 ，Io 中 每 个 对 象 都 可 以 作为 原型 被 克隆 ， 当 Animal 
对 象 克隆 自 0bject 对 象 ，Dog 对 象 又 克隆 自 Animal 对 象 时 ， 便 形成 了 一 条 天 然 的 原型 链 ， 如 图 


1-3 所 示 。 
Dog Cem) Com) 


图 1-3 


而 在 JavaScript 中 ， 每 个 对 象 都 是 从 0bject.prototype 对 象 克隆 而 来 的 ， 如 果 是 这 样 的 话 ， 
我 们 只 能 得 到 单一 的 继承 关系 ， 即 每 个 对 象 都 继承 自 0bject.prototype 对 象 ， 这 样 的 对 象 系统 显 
然 是 非常 受 限 的 。 

实际 上 上， 虽然 JavaScript 的 对 象 最 初 都 是 由 0bject.prototype 对 象 克 隆 而 来 的 ， 但 对 象 构造 
器 的 原型 并 不 仅 限 于 0bject.prototype 上 ， 而 是 可 以 动态 指向 其 他 对 象 。 这 样 一 来 ， 当 对 象 需 
要 借用 对 象 b 的 能 力 时 ， 可 以 有 选择 性 地 把 对 象 a 的 构造 器 的 原型 指向 对 象 b， 从 而 达到 继承 的 
效果 。 下面 的 代码 是 我 们 最 常用 的 原型 继承 方式 : 


var obj = { name: 'sven' }; 

























































































var A = function(){}; 
A.prototype = obj; 


var a = new A(); 
console.log( a.name ); // 输出 : sven 


我 们 来 看 看 执行 这 段 代码 的 时 候 ， 引 擎 做 了 哪些 事情 。 

口 首先 ， 尝 试 遍 历 对 象 a 中 的 所 有 属性 ， 但 没有 找到 name 这 个 属性 。 
口 查找 name 属性 的 这 个 请 求 被 委托 给 对 象 a 的 构造 器 的 原型 ， 它 被 aproto “记录 着 并 且 
指向 A.prototype， 而 A.prototype 被 设置 为 对 象 obj。 

口 在 对 象 obj 中 找到 了 name 属性 ， 并 返回 它 的 值 。 

当 我 们 期 望 得 到 一 个 “类 ”继承 自 另 外 一 个 “类 ”的 效果 时 , 往往 会 用 下 面 的 代码 来 模拟 实现 : 


var A = function(){}; 
A.prototype = { name: 'sven' }; 















































var B = function(){}; 
B.prototype = new A(); 


var b = new B(); 
console.log( b.name ); // 输出 : sven 


再 看 这 段 代码 执行 的 时 候 ， 引 擎 做 了 什么 事情 。 
口 首先 ， 尝 试 遍历 对 象 b 中 的 所 有 属性 ， 但 没有 找到 name 这 个 属性 。 
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口 查找 name 属性 的 请 求 被 委托 给 对 象 b 的 构造 器 的 原型 ， 它 被 bproto “记录 着 并 且 指 向 
B.prototype， 而 B.prototype 被 设置 为 一 个 通过 new A() 创 建 出 来 的 对 象 。 

口 在 该 对 象 中 依然 没有 找到 name 属性 ， 于 是 请 求 被 继续 委托 给 这 个 对 象 构造 器 的 原型 
A.prototype。 

口 在 A.prototype 中 找到 了 name 属性 ， 并 返回 它 的 值 。 


和 把 B.prototype 直接 指向 一 个 字面 量 对 象 相 比 ， 通 过 B.prototype = new A() 形 成 的 原型 链 比 
之 前 多 了 一 层 。 但 二 者 之 间 没 有 本 质 上 的 区 别 , 都 是 将 对 象 构造 器 的 原型 指向 男 外 一 个 对 象 ， 继 
承 总 是 发 生 在 对 象 和 对 象 之 间 。 

最 后 还 要 留意 一 点 ， 原 型 链 并 不 是 无 限 长 的 。 现 在 我 们 尝试 访问 对 象 a 的 address 属性 。 而 
对 象 b 和 它 构造 器 的 原型 上 都 没有 address 属性 ， 那 么 这 个 请 求 会 被 最 终 传递 到 哪里 呢 ? 

实际 上 ， 当 请 求 达到 A.prototype， 并 且 在 A.prototype 中 也 没有 找到 address 属性 的 时 候 ， 
请 求 会 被 传递 给 A.prototype 的 构造 器 原型 0bject.prototype， 显 然 0bject.prototype 中 也 没有 
address 属性 ,但 0bject.prototype 的 原型 是 null, 说 明 这 时 候 原型 链 的 后 面 已 经 没有 别 的 节点 了 。 
所 以 该 次 请 求 就 到 此 打住 ，a.address 返回 undefined。 


a.address // 输出 : undefined 



























































1.4.6 ”原型 继承 的 未 来 


设计 模式 在 很 多 时 候 其 实 都 体现 了 语言 的 不 足 之 处 。Peter Norvig 曾 说 ,设计 模式 是 对 语言 
不 足 的 补充 ， 如 果 要 使 用 设计 模式 ， 不 如 去 找 一 门 更 好 的 语言 。 这 句 话 非常 正确 。 不 过 ， 作 为 
Web 前 端 开发 者 ， 相 信 JavaScript 在 未 来 很 长 一 段 时 间 内 都 是 唯一 的 选择 。 虽 然 我 们 没有 办 法 换 
门 语言 , 但 语言 本 身 也 在 发 展 , 说 不 定 哪 天 某 个 模式 在 JavaScript 中 就 已 经 是 天 然 的 存在 , 不 再 
需要 拐弯 抹 角 来 实现 。 比 如 0bject.create 就 是 原型 模式 的 天 然 实现 。 使 用 0bject.create 来 完成 原 
型 继承 看 起 来 更 能 体现 原型 模式 的 精髓 。 目 前 大 多 数 主流 浏览 器 都 提供 了 object.create 方 法 。 
但 美中不足 是 在 当前 的 JavaScript 引擎 下 , 通过 0bject.create 来 创建 对 象 的 效率 并 不 高 , 通 
常 比 通过 构造 函数 创建 对 象 要 慢 。 此 外 还 有 一 些 值得 注意 的 地 方 ， 比 如 通过 设置 构造 器 的 
prototype 来 实现 原型 继承 的 时 候 , 除了 根 对 象 0bject.prototype 本 身 之 外 , 任何 对 象 都 会 有 一 个 
原型 。 而 通过 0bject.create( null ) 可 以 创建 出 没有 原型 的 对 象 。 


另外 ，ECMAScript 6 带 来 了 新 的 Class 语法 。 这 让 JavaScript 看 起 来 像 是 一 门 基于 类 的 语言 ， 
但 其 背后 仍 是 通过 原型 机 制 来 创建 对 象 。 通 过 Class 创建 对 象 的 一 段 简单 示例 代码 "如 下 所 示 : 
class Animal { 


constructor(name) { 
this.name = name; 


} 





















































































































































Qa 这 段 代码 来 自 http://jurberg.github.io/blog/2014/07/12/javascript-prototype/。 
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getName() { 
return this.name; 


} 
} 


class Dog extends Animal { 
constructor(name) { 
super(name); 


} 
speak() { 
return "woof"; 


} 
} 


var dog = new Dog("Scamp"); 
console.log(dog.getName() + ' says ' + dog.speak()); 


1.4.6 ”小 结 

本 节 讲 述 了 本 书 的 第 一 个 设计 模式 一 一 原型 模式 。 原 型 模式 是 一 种 设计 模式 , 也 是 一 种 编程 
泛 型 , 它 构成 了 JavaScript 这 门 语言 的 根本 。 本 节 首 先 通 过 更 加 简单 的 Io 语言 来 引入 原型 模式 的 
概念 ， 随 后 学 习 了 JavaScript 中 的 原型 模式 。 原 型 模式 十 分 重要 ， 和 JavaScript 开发 者 的 关系 十 
分 密切 。 通 过 原型 来 实现 的 面向 对 象 系统 虽然 简单 ， 但 能 力 同 样 强大 。 
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俗话 说 ， 条 条 大 路 通 罗 马 。 在 美剧 《越狱 》 中 ， 主 角 Michael Scofield 就 设计 了 两 条 越狱 的 


道路 。 这 两 条 道路 都 可 以 到 达 靠 近 监 狱 外 墙 的 医务 室 。 


同样 ， 在 现实 中 ， 很 多 时 候 也 有 多 种 途径 到 达 同 一 个 目的 地 。 比 如 我 们 要 去 某 个 地 方 旅游 ， 


可 以 根据 具体 的 实际 情况 来 选择 出 行 的 线路 。 


口 如 果 没 有 时 间 但 是 不 在 乎 钱 ， 可 以 选择 坐 飞机 。 
口 如 果 没 有 钱 ， 可 以 选择 坐 大 巴 或 者 火车 。 
口 如 果 再 穷 一 点 ， 可 以 选择 骑 自 行车 。 






































在 程序 设计 中 , 我 们 也 常常 遇 到 类 似 的 情况 , 要 实现 某 一 个 功能 有 多 种 方案 可 以 选择 。 比 如 





一 个 压缩 文件 的 程序 ， 既 可 以 选择 zip 算 法 ， 也 可 以 选择 gzip 算法 。 











这 些 算 法 灵活 多 样 ， 而 且 可 以 随意 互相 替换 。 这 种 解决 方案 就 是 本 章 将 要 介绍 的 策略 模式 。 
策略 模式 的 定义 是 : 定义 一 系列 的 算法 , 把 它们 一 个 个 封装 起 来 , 并 且 使 它们 可 以 相互 奉 换 。 
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5.1 使 用 策略 模式 计算 奖金 

策略 模式 有 着 广泛 的 应 用 。 本 节 我 们 就 以 年 终 奖 的 计算 为 例 进 行 介 绍 。 

很 多 公司 的 年 终 奖 是 根据 员工 的 工资 基数 和 年 底 绩效 情况 来 发 放 的 。 例 如 , 绩效 为 $ 的 人 年 
终 奖 有 4 倍 工资 , 绩效 为 A 的 人 年 终 奖 有 3 倍 工资 ,而 绩效 为 B 的 人 年 终 奖 是 2 倍 工资 。 假 设 财 
务 部 要 求 我 们 提供 一 段 代码 ， 来 方便 他 们 计算 员工 的 年 终 奖 。 

1. 最 初 的 代码 实现 

我 们 可 以 编写 一 个 名 为 calculateBonus 的 函数 来 计算 每 个 人 的 奖金 数额 。 很 显然 ， 


calculateBonus 消 数 要 正确 工作 ， 就 需要 接收 两 个 参数 : 员工 的 工资 数额 和 他 的 绩效 考核 等 级 。 
代码 如 下 : 


var calculateBonus = function( performanceLevel, salary ){ 


























if ( performanceLevel === 'S' ){ 
return salary * 4; 
} 
if ( performanceLevel === 'A' ){ 
return salary * 3; 
} 
if ( performanceLevel === 'B' ){ 
return salary * 2; 
} 
}; 
calculateBonus( 'B', 20000 ); // 输出 : 40000 
calculateBonus( 'S', 6000 ); // 输出 : 24000 





可 以 发 现 ， 这 段 代码 十 分 简单 ， 但 是 存在 着 显而易见 的 缺点 。 
口 calculateBonus 隐 数 比较 庞大 ， 包 含 了 很 多 if-else 语句 ， 这 些 语句 需要 履 盖 所 有 的 逻辑 
分 支 。 
口 calculateBonus 函数 缺乏 弹性 ， 如 果 增 加 了 一 种 新 的 绩效 等 级 C， 或 者 想 把 绩效 S 的 奖金 
系数 改 为 $, 那 我 们 必须 深入 calculateBonus 本 数 的 内 部 实现 , 这 是 违反 开放 -封闭 原则 的 。 
口算 法 的 复 用 性 差 ， 如 果 在 程序 的 其 他 地 方 需要 重用 这 些 计算 奖金 的 算法 呢 ?” 我 们 的 选择 
只 有 复制 和 粘贴 。 

因此 ， 我 们 需要 重 构 这 段 代 码 。 

2. 使 用 组 合 函 数 重 构 代 码 

一 般 最 容易 想到 的 办 法 就 是 使 用 组 合 函 数 来 重 构 代 码 , 我 们 把 各 种 算法 封装 到 一 个 个 的 小 函 
数 里 面 ,这 些小 函数 有 着 良好 的 命名 ， 可 以 一 目 了 然 地 知道 它 对 应 着 哪 种 算法 ,它们 也 可 以 被 复 
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用 在 程序 的 其 他 地 方 。 代 码 如 下 : 


var performanceS = function( salary ){ 
return salary * 4; 


}; 


var performanceA = function( salary ){ 
return salary * 3; 


}; 


var performanceB = function( salary ){ 
return salary * 2; 


}; 
var calculateBonus = function( performanceLevel, salary ){ 


if ( performanceLevel === 'S' ){ 
return performanceS( salary ); 


} 


if ( performanceLevel === 'A' ){ 
return performanceA( salary ); 


} 


if ( performanceLevel === 'B' ){ 
return performanceB( salary ); 


} 
}; 


calculateBonus( 'A' , 10000 ); // 输出 : 30000 





目前 , 我 们 的 程序 得 到 了 一 定 的 改善 , 但 这 种 改善 非常 有 限 , 我 们 依然 没有 解决 最 重要 的 问 





3. 使 用 策略 模式 重 构 代码 
经 过 思考 , 我 们 想到 了 更 好 的 办 法 








: calculateBonus 国 数 有 可 能 越 来 越 庞 大 ， 而 且 在 系统 变化 的 时 候 缺 乏 弹 性 。 




















使 用 策略 模式 来 重 构 代 码 。 策 略 模式 指 的 是 定义 一 系 

















列 的 算法 ， 把 它们 一 个 个 封装 起 来 。 将 不 变 的 部 分 和 变化 的 部 分 隔 开 是 每 个 设计 模式 的 主题 , 策 
略 模式 也 不 例外 ， 策 略 模式 的 目的 就 是 将 算法 的 使 用 与 算法 的 实现 分 离开 来 。 
在 这 个 例子 里 , 算法 的 使 用 方式 是 不 变 的 , 都 是 根据 某 个 算法 取得 计算 后 的 奖金 数额 。 而 算 


法 的 实现 是 各 异 和 变化 的 ， 每 种 绩效 对 应 着 不 同 的 计算 规则 。 


把 请 求 委托 给 某 一 个 策略 类 。 要 做 到 这 点 ， 


















































一 个 基于 策略 模式 的 程序 至 少 由 两 部 分 组 成 。 第 一 个 部 分 是 一 组 策略 类 ,策略 类 封装 了 具体 
的 算法 ， 并 负责 具体 的 计算 过 程 。 第 二 个 部 分 是 环境 类 Context，Context 接受 客户 的 请 求 ， 随 后 





说 明 Context 中 要 维持 对 某 个 策略 对 象 的 引用 。 


现在 用 策略 模式 来 重 构 上 面 的 代码 。 第 一 个 版 本 是 模仿 传统 面向 对 象 语言 中 的 实现 。 我 们 先 
把 每 种 绩效 的 计算 规则 都 封装 在 对 应 的 策略 类 里 面 : 
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var performanceS = function(){}; 


performanceS.prototype.calculate = function( salary ){ 
return salary * 4; 


}; 
var performanceA = function(){}; 


performanceA.prototype.calculate = function( salary ){ 
return salary * 3; 


}; 
var performanceB = function(){}; 


performanceB.prototype.calculate = function( salary ){ 
return salary * 2; 





}; 
接 下 来 定义 奖金 类 Bonus: 
var Bonus = function(){ 
this.salary = null; // 原始 工资 
this.strategy = null; // 绩效 等 级 对 应 的 策略 对 象 
}; 


Bonus.prototype.setSalary = function( salary ){ 
this.salary = salary; ”// 设置 员工 的 原始 工资 
}; 
Bonus.prototype.setStrategy = function( strategy ){ 
this.strategy = strategy; ”// 设置 员工 绩效 等 级 对 应 的 策略 对 象 
}; 


Bonus.prototype.getBonus = function(){ // 取得 奖金 数额 

return this.strategy.calculate( this.salary );  ”// 把 计算 奖金 的 操作 委托 给 对 应 的 策略 对 象 
】 
在 完成 最 终 的 代码 之 前 ， 我 们 再 来 回顾 一 下 策略 模式 的 思想 : 

定义 一 系列 的 算法 ， 把 它们 一 个 个 封装 起 来 ， 并 且 使 它们 可 以 相互 替换 "。 

这 句 话 如 果 说 得 更 详细 一 点 ， 就 是 : 定义 一 系列 的 算法 ， 把 它们 各 自封 装 成 策略 类 ， 算 法 被 
封装 在 策略 类 内 部 的 方法 里 。 在 客户 对 Context 发 起 请 求 的 时 候 ，Context 总 是 把 请 求 委 托 给 这 些 
策略 对 象 中 间 的 某 一 个 进行 计算 。 

现在 我 们 来 完成 这 个 例子 中 剩 下 的 代码 。 先 创建 一 个 bonus 对 象 ， 并 且 给 bonus 对 象 设置 一 

































































@“ 并 且 使 它们 可 以 相互 替换 ”， 这 人 句 话 在 很 大 程度 上 是 相对 于 静态 类 型 语言 而 言 的 。 因 为 静态 类 型 语言 中 有 类 型 检 
查 机 制 ， 所 以 各 个 策略 类 需要 实现 同样 的 接口 。 当 它们 的 真正 类 型 被 隐藏 在 接口 后 面 时 ， 它 们 才能 被 相互 蔡 换 。 
而 在 JavaScript 这 种 “类 型 模糊 ”的 语言 中 没有 这 种 困扰 , 任何 对 象 都 可 以 被 替换 使 用 。 因 此 , JavaScript 中 的 “可 
以 相互 替换 使 用 ”表现 为 它们 具有 相同 的 目标 和 意图 。 
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些 原 始 的 数据 ， 比 如 员工 的 原始 工资 数额 。 接 下 来 把 某 个 计算 奖金 的 策略 对 象 也 传人 bonus 对 象 
内 部 保存 起 来 。 当 调 用 bonus.getBonus() 来 计算 奖金 的 时 候 , bonus 对 象 本 身 并 没有 能 力 进行 计算 ， 
而 是 把 请 求 委 托 给 了 之 前 保存 好 的 策略 对 象 : 


var bonus = new Bonus(); 























bonus.setSalary( 10000 ); 
bonus.setStrategy( new performanceS() ); // 设置 策略 对 象 


console.1og( bonus.getBonus() ); // 输出 : 40000 


bonus.setStrategy( new performanceA() ); // 设置 策略 对 象 
console.1og( bonus.getBonus() ); // 输出 : 30000 


刚刚 我 们 用 策略 模式 重 构 了 这 段 计算 年 终 奖 的 代码 , 可 以 看 到 通过 策略 模式 重 构 之 后 , 代码 
变 得 更 加 清晰 ， 各 个 类 的 职责 更 加 鲜明 。 但 这 段 代码 是 基于 传统 面向 对 象 语言 的 模仿 ， 下 一 节 我 
们 将 了 解 用 JavaScript 实现 的 策略 模式 。 
































5.2 ” JavaScript 版 本 的 策略 模式 


在 5.1 节 中 , 我 们 让 strategy 对 象 从 各 个 策略 类 中 创建 而 来 ， 这 是 模拟 一 些 传 统 面 向 对 象 语 
言 的 实现 。 实 际 上 在 JavaScript 语言 中 ， 函 数 也 是 对 象 ， 所 以 更 简单 和 直接 的 做 法 是 把 strategy 
直接 定义 为 函数 : 


var strategies = { 

"S": function( salary ){ 
return salary * 4; 

}, 

"A": function( salary ){ 
return salary * 3; 

}), 

"B": function( salary ){ 
return salary * 2; 


} 






































}; 


同样 ，Context 也 没有 必要 必须 用 Bonus 类 来 表示 ， 我 们 依然 用 calculateBonus 函数 充当 
Context 来 接受 用 户 的 请 求 。 经 过 改造 ， 代 码 的 结构 变 得 更 加 简洁 : 


var strategies = { 
"S": function( salary ){ 
return salary * 4; 
}, 
"A": function( salary ){ 
return salary * 3; 
用 
"B": function( salary ){ 
return salary * 2; 





var calculateBonus = function( level, salary ){ 
return strategies[ level ]( salary ); 


console.log( calculateBonus( 'S', 20000 ) ); // 输出 : 80000 
console.log( calculateBonus( 'A', 10000 ) ); // 输出 : 30000 


在 接 下 来 的 缓 动 动画 和 表单 验证 的 例子 中 ， 我 们 用 到 的 都 是 这 种 函数 形式 的 策略 对 象 。 


5.3 多 态 在 策略 模式 中 的 体现 


通过 使 用 策略 模式 重 构 代码 , 我 们 消除 了 原 程序 中 大 片 的 条 件 分 支 语句 。 所 有 跟 计 算 奖金 有 
关 的 逻辑 不 再 放 在 Context 中 ， 而 是 分 布 在 各 个 策略 对 象 中 。Context 并 没有 计算 奖金 的 能 力 ， 而 
是 把 这 个 职责 委托 给 了 某 个 策略 对 象 。 每 个 策略 对 象 负责 的 算法 已 被 各 自封 装 在 对 象 内 部 。 当 我 
们 对 这 些 策略 对 象 发 出 “计算 奖金 ”的 请 求 时 ,它们 会 返回 各 自 不 同 的 计算 结果 ,这 正 是 对 象 多 
态 性 的 体现 ， 也 是 “它们 可 以 相互 替换 ”的 目的 。 替 换 Context 中 当前 保存 的 策略 对 象 ， 便 能 执 
行 不 同 的 算法 来 得 到 我 们 想 要 的 结 


5.4 ”使 用 策略 模式 实现 缓 动 动画 


如 果 让 一 些 不 太 了 解 前 端 开 发 的 程序 员 来 投票 , 选 出 他 们 眼中 JavaScript 语言 在 Web 开发 中 

的 两 大 用 途 ， 我 想 结果 很 有 可 能 是 这 样 的 : 

口 编写 一 些 让 div 飞 来 飞 去 的 动画 

口 验证 表单 

虽然 这 只 是 一 句 玩 笑话 ， 但 从 中 可 以 看 到 动画 在 Web 前 端 开发 中 的 地 位 。 一 些 别 出 心 裁 的 
动画 效果 可 以 让 网 站 增色 不 少 。 

有 一 段 时 间 网 页 游戏 非常 流行 , HTMLS5 版 本 的 游戏 可 以 达到 不 逊 于 Flash 游戏 的 效果 。 我 曾 
经 编写 过 HTMLS5 版 本 的 街头 霸王 游戏 ， 让 游戏 的 主角 跳跃 或 是 移动 ， 实 际 上 只 是 让 这 个 div 按 
照 一 定 的 缓 动 算 法 进行 运动 而 已 。 

如 果 我 们 明白 了 怎样 让 一 个 小 球 运动 起 来 , 那么 离 编 写 一 个 完整 的 游戏 就 不 遥远 了 , 剩 下 的 
只 是 一 些 把 逻辑 组 织 起 来 的 体力 活 。 本 节 并 不 会 从 头 到 尾 地 编写 一 个 完整 的 游戏 , 我 们 首先 要 做 
的 是 让 一 个 小 球 按照 不 同 的 算法 进行 运动 。 






































































































































5.4.1 ”实现 动画 效果 的 原理 
用 JavaScript 实现 动画 效果 的 原理 跟 动画 片 的 制作 一 样 ， 动 画 片 是 把 一 些 差 距 不 大 的 原画 以 
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较 快 的 帧 数 播放 , 来 达到 视觉 上 的 动画 效果 。 在 JavaScript 中 , 可 以 通过 连续 改变 元 素 的 某 个 CSS 


发 性 ， 比 如 left 、top 、background-position 来 实现 动画 效果 。 图 5-1 就 是 通过 改变 节点 的 
background-position， 让 人 物 动 起 来 的 。 


ey 


RR 
和 


a sw 
pe 局 
二 已 一 -人 











FE 
作 到- 


at) 








5.4.2 思路 和 一 些 准 备 工作 
我 们 目标 是 编写 一 个 动画 类 和 一 些 缓 动 算法 ， 让 小 球 以 各 种 各 样 的 组 动 效 果 在 页 面 中 和 运动。 
现在 来 分 析 实 现 这 个 程序 的 思路 。 在 运动 开始 之 前 , 需要 提前 记录 一 些 有 用 的 信息 ,至 少 包 
括 以 下 信息 : 
口 动画 开始 时 ， 小 球 所 在 的 原始 位 置 ; 
口 小 球 移 动 的 目标 位 置 ; 
口 动画 开始 时 的 准确 时 间 点 ; 
口 小 球 运 动 持 续 的 时 间 。 
随后 ,我 们 会 用 setInterval 创建 一 个 定时 器 ,定时 需 每 隔 19ms 循环 一 次 。 在 定时 器 的 每 一 
帧 里 , 我 们 会 把 动画 已 消耗 的 时 间 、 小 球 原始 位 置 、 小 球 目 标 位 置 和 动画 持续 的 总 时 间 等 信息 传 
人 组 动 算法 。 该 算法 会 通过 这 几 个 参数 ， 计 算出 小 球 当 前 应 该 所 在 的 位 置 。 最 后 再 更 新 该 div 对 
应 的 CSS 属性 ， 小 球 就 能 够 顺利 地 运动 起 来 了 。 


































































































5.4.3 ”让 小 球 运动 起 来 


在 实现 完整 的 功能 之 前 ， 我 们 先 了 解 一 些 常 见 的 缓 动 算法 ， 这 些 算法 最 初 来 自 Flash， 但 可 
以 非常 方便 地 移植 到 其 他 语言 中 。 

这 些 算 法 都 接受 4 个 参数 ,这 4 个 参数 的 含义 分 别 是 动画 已 消耗 的 时 间 、 小 球 原 始 位 置 、 小 
球 目标 位 置 、 动 画 持 续 的 总 时 间 ， 返 回 的 值 则 是 动画 元 素 应 该 处 在 的 当前 位 置 。 代 码 如 下 : 

var tween = { 


linear: function( t, b, c, d ){ 
return c*t/d + b; 





























}), 

easeIn: function( t, b, c, d ){ 
returnc*(t/=d)*t+b; 

}), 
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strongEaseIn: function(t, b, c, d){ 
returnc*(t/=d)*t*t*t*t+b; 

}), 

strongEaseOut: function(t, b, c, d){ 
returnc*((t=t/d-1)*t*t*t*t+1)+b; 

}), 

sineaseIn: function( t, b, c, d ){ 
Teturn c*(t/=d)*t*t+b; 

}), 


sineaseOut: function(t,b,c,d){ 
returnc*((t=t/d-1)*t*t+1)+b; 
} 


}; 

现在 我 们 开始 编写 完整 的 代码 ， 下 面 代码 的 思想 来 自 jQuery 库 ， 由 于 本 节 的 目标 是 演示 策 
略 模式 ， 而 非 编 写 一 个 完整 的 动画 库 ， 因 此 我 们 省 去 了 动画 的 队列 控制 等 更 多 完整 功能 。 

现在 进入 代码 实现 阶段 ， 首 先 在 页 面 中 放置 一 个 div: 

<body> 


<div style="position:absolute;background:blue”id="div"> 我 是 div</div> 
</body> 


接 下 来 定义 Animate 类 ,Animate 的 构造 函数 接受 一 个 参数 :即将 运动 起 来 的 dom 节点 -Animate 
类 的 代码 如 下 : 


var Animate = function( dom ){ 






































this.dom = dom; // 进行 运动 的 dom 节点 

this.startTime = 0; // 动画 开始 时 间 

this.startPos = 0; // 动画 开始 时 ，dom 节点 的 位 置 ， 即 dom 的 初始 位 置 
this.endpPos = 0; // 动画 结束 时 ，dom 节点 的 位 置 ， 即 dom 的 目标 位 置 
this.propertyName = null; // dom 节点 需要 被 改变 的 css 属性 名 

this.easing = null; // 缓 动 算法 

this.duration = null; // 动画 持续 时 间 


} 


接 下 来 Animate.prototype.start 方法 负责 启动 这 个 动画 ， 在 动画 被 启动 的 瞬间 ， 要 记录 一 些 
言 息 ， 供 缓 动 算法 在 以 后 计算 小 球 当前 位 置 的 时 候 使 用 。 在 记录 完 这 些 信息 之 后 ,此 方法 还 要 负 
责 启动 定时 器 。 代 码 如 下 : 


Animate.prototype.start = function( propertyName, endPos, duration, easing ){ 
this.startTime = +new Date; // 动画 启动 时 间 
this.startPos = this.dom.getBoundingClientRect()[ propertyName ]; // dom 节点 初始 位 置 
this.propertyName = propertyName; // dom 节点 需要 被 改变 的 C55 属性 名 
this.endPos = endPos; // dom 节点 目标 位 置 
this.duration = duration;  // 动画 持续 事件 
this.easing = tween[ easing ]; // 缓 动 算法 




















var self = this; 


var timeId = setInterval(function(){ // 启动 定时 器 ， 开 始 执 行动 画 
if ( self.step() === false ){ // 如 果 动 画 已 结束 ， 则 清除 定时 器 


clearInterval( timeId ); 
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}, 19 ); 
}; 


Animate.prototype.start 方法 接受 以 下 4 个 参数 。 
口 propertyName: 要 改变 的 CSS 属性 名 ,比如 '1left' 、'top', 分 别 表示 左右 移动 和 上 下 移动 。 
口 endPos: 小 球 运 动 的 目标 位 置 。 
口 duration: 动画 持续 时 间 。 
口 easing: 绥 动 算法 。 

再 接 下 来 是 Animate.prototype.step 方法 ， 该 方法 代表 小 球 运动 的 每 一 帧 要 做 的 事情 。 在 此 
处 ， 这 个 方法 负责 计算 小 球 的 当前 位 置 和 调用 更 新 CSS 属性 值 的 方法 Animate.prototype.update。 
代码 如 下 : 


Animate.prototype.step = function(){ 


























var t = +new Date; // 取得 当前 时 间 
if ( t >= this.startTime + this.duration ){ // (1) 


this.update( this.endPos );  // 更 新 小 球 的 CS5 属性 值 
return false; 


} 
var pos = this.easing( t - this.startTime, this.startPos, 
this.endPos - this.startPos, this.duration ); 
// pos 为 小 球 当前 位 置 
this.update( pos ); // 更 新 小 球 的 C55 属性 值 
}; 
在 这 段 代码 中 , (1) 处 的 意思 是 , 如 果 当 前 时 间 大 于 动画 开始 时 间 加 上 动画 持续 时 间 之 和 , 说 
明 动 画 已 经 结束 ， 此 时 要 修正 小 球 的 位 置 。 因 为 在 这 一 帧 开始 之 后 ,小 球 的 位 置 已 经 接近 了 目标 
位 置 ， 但 很 可 能 不 完全 等 于 目标 位 置 。 此 时 我 们 要 主动 修正 小 球 的 当前 位 置 为 最 终 的 目标 位 置 。 
此 外 让 Animate.prototype.step 方法 返回 false， 可 以 通知 Animate.prototype.start 方法 清除 定 
时 笑 。 


最 后 是 负责 更 新 小 球 CSS 属性 值 的 Animate.prototype.update 方法 : 


Animate.prototype.update = function( pos ){ 
this.dom.style[ this.propertyName ] = pos + 'px'; 



















































































如 果 不 嫌 麻 烦 ， 我 们 可 以 进行 一 些小 小 的 测试 : 


var div = document.getElementById( 'div' ); 
var animate = new Animate( div ); 





animate.start( 'left', 500, 1000, 'strongEaseOut' ); 
// animate.start( 'top', 1500, 500, 'strongEaseIn' ); 


通过 这 段 代 码 ， 可 以 看 到 小 球 按照 我 们 的 期 望 以 各 种 各 样 的 缓 动 算法 在 页 面 中 运动 。 
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本 节 我 们 学 会 了 怎样 编写 一 个 动画 类 , 利用 这 个 动画 类 和 一 些 缓 动 算法 就 可 以 让 小 球 运动 起 
来 。 我 们 使 用 策略 模式 把 算法 传人 动画 类 中 , 来 达到 各 种 不 同 的 缓 动 效果 ,这些 算法 都 可 以 轻易 
地 被 蔡 换 为 另外 一 个 算法 ,这 是 策略 模式 的 经 典 运用 之 一 。 策 略 模式 的 实现 并 不 复杂 ,关键 是 如 
何 从 策略 模式 的 实现 背后 ， 找 到 封装 变化 、 委 托 和 多 态 性 这 些 思想 的 价值 。 


5.5 更 广义 的 “算法 ” 


策略 模式 指 的 是 定义 一 系列 的 算法 , 并 且 把 它们 封装 起 来 。 本 章 我 们 介绍 的 计算 奖金 和 缓 动 
动画 的 例子 都 封装 了 一 些 算法 。 

从 定义 上 看 ， 策 略 模式 就 是 用 来 封装 算法 的 。 但 如 果 把 策略 模式 仅仅 用 来 封装 算法 ,未 免 有 
一 点 大 材 小 用 。 在 实际 开发 中 , 我 们 通常 会 把 算法 的 含义 扩散 开 来 ,使 策略 模式 也 可 以 用 来 封装 
一 系列 的 “业务 规则 ”。 只 要 这 些 业 务 规则 指向 的 目标 一 致 ， 并 且 可 以 被 蔡 换 使 用 ， 我 们 就 可 以 
用 策略 模式 来 封装 它们 。 

GoF 在 《设计 模式 ;一 书 中 提 到 了 一 个 利用 策略 模式 来 校 验 用 户 是 否 输入 了 合法 数据 的 例子 ， 
但 GoF 未 给 出 具体 的 实现 。 刚 好 在 Web 开发 中 ， 表 单 校 验 是 一 个 非常 常见 的 话题 。 下 面 我 们 就 
看 一 个 使 用 策略 模式 来 完成 表单 校 验 的 例子 。 


5.6 表单 校 验 


在 一 个 Web 项目 中 ,， 注册、 登录 、 修 改 用 户 信息 等 功能 的 实现 都 离 不 开 提交 表单 。 
在 将 用 户 输入 的 数据 交 给 后 台 之 前 , 常常 要 做 一 些 客户 端 力所能及 的 校 验 工作 ,比如 注册 的 
时 候 需 要 校 验 是 否 填写 了 用 户 名 ， 密 码 的 长 度 是 否 符合 规定 ,等 等 。 这 样 可 以 避免 因为 提交 不 合 
法 数据 而 带 来 的 不 必要 网 络 开销 。 
假设 我 们 正在 编写 一 个 注册 的 页 面 ， 在 点 击 注册 按钮 之 前 ， 有 如 下 几 条 校 验 逻 辑 。 
口 用 户 名 不 能 为 空 。 
口 密码 长 度 不 能 少 于 6 位 。 
口 手机 号 码 必须 符合 格式 。 


5.6.1 表单 校 验 的 第 一 个 版 本 


现在 编写 表单 校 验 的 第 一 个 版 本 ,可 以 提前 透露 的 是 ， 目 前 我 们 还 没有 引入 策略 模式 。 代 码 
如 下 : 


<html> 
<body> 
<form action="http:// xxx.com/register" id="registerForm" method="post"> 
请 输入 用 户 名 : <input type="text" name="userName"/ > 
请 输入 密码 : xinput type="text" name="password"/ > 
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请 输入 手机 号 码 : xinput type="text" name="phoneNumber"/ > 
ons en 
</form> 
<script> 
var registerForm = document.getElementById( 'registerForm' ); 


registerForm.onsubmit = function(){ 
if ( registerForm.userName.value === ''" ){ 
alert (“ 用 户 名 不 能 为 空 ” ); 
return false; 


lL 


if ( registerForm.password.value.length < 6 ){ 
alert (“' 密 码 长 度 不 能 少 于 6 位 ' ); 
return false; 


} 
if ( 1!/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){ 
alert ( “手机 号 码 格式 不 正确 ” ); 
return false; 
} 
} 
</script> 
</body> 
</html> 


这 是 一 种 很 常见 的 代码 编写 方式 ， 它 的 缺点 跟 计算 奖金 的 最 初版 本 一 模 一 样 。 
口 registerForm.onsubmit 函数 比较 庞大 ， 包 含 了 很 多 if-else 语句 ， 这 些 语句 需要 覆盖 所 有 
的 校 验 规则 。 
口 registerForm.onsubmit 函数 缺乏 弹性 ， 如 果 增 加 了 一 种 新 的 校 验 规 则 ， 或 者 氏 es 
度 校 验 从 6 改 成 8, 我 们 都 必须 深入 registerForm.onsubmit 函数 的 内 部 实现 ， 这 是 违反 开 
放 - 封 闭 原则 的 。 
口 算法 的 复 用 性 差 ， 如 果 在 程序 中 增加 了 另外 一 个 表单 ， 这 个 表单 也 需要 进行 一 些 类 似 的 
校 验 ， 那 我 们 很 可 能 将 这 些 校 验 逻辑 复制 得 漫天 遍野 。 


5.6.2 ”用 策略 模式 重 构 表单 校 验 


下 面 我 们 将 用 策略 模式 来 重 构 表单 校 验 的 代码 , 很 显然 第 一 步 我 们 要 把 这 些 校 验 逻辑 都 封装 
成 策略 对 象 


var strategies = { 
isNonEmpty: function( value, errorMsg ){ // 不 为 空 
if ( value === ''" ){ 
return errorMsg ; 


} 


}, 
minLength: function( value, length, errorMsg ){ // 限制 最 小 长 度 
if ( value.length < length ){ 
return errorMsg; 























一 


isMobile: function( value, errorMsg ){ // 手机 号 码 格式 
if ( 1/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ 
return errorMsg; 
} 


} 
}; 
接 下 来 我 们 准备 实现 Validator 类 。Validator 类 在 这 里 作为 Context， 人 负责 接收 用 户 的 请 求 
并 委托 给 strategy 对 象 -在 给 出 Validator 类 的 代码 之 前 ,有 必要 提前 了 解 用 户 是 如 何 向 Validator 
类 发 送 请 求 的 ， 这 有 助 于 我 们 知道 如 何 去 编 写 Validator 类 的 代码 。 代 码 如 下 : 


var validataFunc = function(){ 
var validator = new Validator(); // 创建 一 个 validator 对 象 














validator.add( registerForm.userName，'isNonEmpty'，' 用 户 名 不 能 为 空 ”); 
validator.add( registerForm.password,，'minLength:6'，' 密码 长 度 不 能 少 于 6 位 ' ); 
validator.add( registerForm.phoneNumber，'isMobile'，' 手 机 号 码 格式 不 正确 ' ); 


var errorMsg = validator.start(); // 获得 校 验 结果 
return errorMsg; // 返回 校 验 结果 


} 


var registerForm = document.getElementById( 'registerForm' ); 
registerForm.onsubmit = function(){ 
var errorMsg = validataFunc();  // 如 果 errorMsg 有 确切 的 返回 值 ， 说 明 未 通过 校 验 
if ( errorMsg ){ 
alert ( errorMsg ); 
return false; // 阻止 表单 提交 


}; 


从 这 段 代 码 中 可 以 看 到 ， 我 们 先 创 建 了 一 个 validator 对 象 ， 然 后 通过 validator.add 方法， 
往 validator 对 象 中 添加 一 些 校 验 规则 。validator.add 方法 接受 3 个 参数 , 以 下 面 这 名 代码 说 明 : 


validator.add( registerForm.password,，'minLength:6'，' 密码 长 度 不 能 少 于 6 位 ' ); 























出 


口 registerForm.password 为 参与 校 验 的 input 输入 框 。 
口 'minLength:6' 是 一 个 以 冒号 隔 开 的 字符 串 。 冒 号 前 面 的 minLength 代 表 客户 挑选 的 strategy 
对 象 , 冒号 后 面 的 数字 6 表示 在 校 验 过 程 中 所 必需 的 一 些 参数 。'minLength:6' 的 意思 就 是 
校 验 registerForm.password 这 个 文本 输入 框 的 value 最 小 长 度 为 6。 如 果 这 个 字符 串 中 不 
包含 冒号 ， 说 明 校 验 过 程 中 不 需要 额外 的 参数 信息 ， 比 如 'isNonEmpty'。 
口 第 3 个 参数 是 当 校 验 未 通过 时 返回 的 错误 信息 。 
当 我 们 往 validator 对 象 里 添加 完 一 系列 的 校 验 规 则 之 后 ， 会 调用 validator.start() 方 法 来 
启动 校 验 。 如 果 validator.start() 返 回 了 一 个 确切 的 errorMsg 字符 串 当 作 返 回 值 , 说明 该 次 校 验 
没有 通过 ， 此 时 需 让 registerForm.onsubmit 方法 返回 false 来 阻止 表单 的 提交 。 
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这 些 校 验 规则 也 可 以 复 用 在 程序 的 任何 地 方 ， 还 能 作为 插件 的 形式 ,方便 地 被 移植 到 其 他 项 
目 中 。 


在 修改 某 个 校 验 规则 的 时 候 , 只 需要 编写 或 者 改写 少量 的 代码 。 比 如 我 们 想 将 用 户 名 输入 机 


的 校 


5.6. 


的 形 

















最 后 是 Validator 类 的 实现 : 


var Validator = function(){ 
this.cache = []; // 保存 校 验 规则 


了 


Validator.prototype.add = function( dom, rule, errorMsg ){ 
var ary = rule.split( ':'" ); // 把 strategy 和 参数 分 开 
this.cache.push(function(){ // 把 校 验 的 步骤 用 空 函 数 包 装 起 来 ， 并 且 放 入 cache 
var strategy = ary.shift(); // 用 户 挑选 的 strategy 
ary.unshift( dom.value ); // 把 input 的 value 添加 进 参数 列表 
ary.push( errorMsg ); // 把 errorMsg 添加 进 参 数列 表 
return strategies[ strategy ].apply( dom, ary ); 
}); 
}; 


Validator.prototype.start = function(){ 
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ 
var msg = validatorFunc(); // 开始 校 验 ， 并 取得 校 验 后 的 返回 信息 
if ( msg ){ // 如 果 有 确切 的 返回 值 ， 说 明 校 验 没有 通过 
return msg; 
} 


} 
下 











使 用 策略 模式 重 构 代 码 之 后 ， 我 们 仅仅 通过 “配置 ”的 方式 就 可 以 完成 一 个 表单 的 校 验 ， 
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验 规则 改 成 用 户 名 不 能 少 于 4 个 字符 。 可 以 看 到 ， 这 时 候 的 修改 是 毫 不 费力 的 。 代 码 如 下 : 





validator.add( TegisterForm.uUserName， "isNonEmpty" ， "用 户 名 不 能 为 空 ”); 


// 政 成 : 
validator.add( registerForm.userName，'minLength:10'，' 用 户 名 长 度 不 能 小 于 10 位 ' ); 


3 ”给 某 个 文本 输入 框 添加 多 种 校 验 规则 





为 了 让 读者 把 注意 力 放 在 策略 模式 的 使 用 上 ,目前 我 们 的 表单 校 验 实现 留 有 一 点 小 遗憾 : 一 
个 文本 输入 框 只 能 对 应 一 种 校 验 规则 ， 比 如 ， 用 户 名 输入 框 只 能 校 验 输入 是 否 为 空 : 








validator.add( registerForm.userName，'isNonEmpty'，' 用 户 名 不 能 为 空 ); 














如 果 我 们 既 想 校 验 它 是 否 为 空 ， 又 想 校 验 它 输入 文本 的 长 度 不 小 于 10 呢 ? 我 们 期 望 以 这 村 





式 进行 校 验 : 


validator.add( registerForm.userName, [{ 
strategy: 'isNonEmpty', 
errorMsg: ' 用 户 名 不 能 为 空 ' 


二 
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strategy: 'minLength:6', 
errorMsg: “用 户 名 长 度 不 能 小 于 10 位 ' 








}] ); 
下 面 提供 的 代码 可 用 于 一 个 文本 输入 框 对 应 多 种 校 验 规则 : 
<html> 

<body> 


<form action="http:// xxx.com/register" id="registerForm" method="post"> 
请 输入 用 户 名 : <input type="text" name="userName"/ > 
请 输入 密码 : xinput type="text" name="password"/ > 
请 输入 手机 号 码 : <input type="text" name="phoneNumber"/ > 
《<button> 提 交 </button> 
</form> 
<script> 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 站 六 米 策 略 对 多 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 


var strategies = { 
isNonEmpty: function( value, errorMsg ){ 
if ( value === ''" ){ 
return errorMsg; 
} 


} 


minLength: function( value, length, errorMsg ){ 
if ( value.length < length ){ 
return errorMsg; 
} 


}, 


isMobile: function( value, errorMsg ){ 
if ( I!/(^1[3|5|8][0-9]{9}$)/.test( value ) ){ 
return errorMsg; 
} 


} 
3 


ahhh ht ht nistsiob thd tinta -NW Es- ep 类 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 了/ 


var Validator = function(){ 
this.cache = []; 


}; 
Validator.prototype.add = function( dom, rules ){ 
var self = this; 
for ( var i = 0, rule; rule = rules[ i++ ]; ){ 
(function( rule ){ 
var strategyAry = rule.strategy.split( ':' ); 


var errorMsg = rule.errorMsg; 


self.cache.push(function(){ 
var strategy = strategyAry.shift(); 
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strategyAry.unshift( dom.value ); 
strategyAry.push( errorMsg ); 
return strategies[ strategy ].apply( dom, strategyAry ); 


}); 
D( rule ) 


二 


Validator.prototype.start = function(){ 
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ 
var errorMsg = validatorFunc(); 
if ( errorMsg ){ 
return errorMsg; 
} 


} 
1 


var registerForm = document.getElementById( 'registerForm' ); 


var validataFunc = function(){ 
var validator = new Validator(); 


validator.add( registerForm.userName, [{ 
strategy: “isNonEmpty ， 
errorMsg: “用 户 名 不 能 为 空 ' 
}, { 
strategy: 'minLength:6', 
errorMsg: “用 户 名 长 度 不 能 小 于 10 位 ' 
]]); 


validator.add( registerForm.password, [{ 
strategy: 'minLength:6', 
errorMsg: “密码 长 度 不 能 小 于 6 位 ' 
}]); 


validator.add( registerForm.phoneNumber, [{ 
strategy: 'isMobile', 
errorMsg: ' 手 机 号 码 格 式 不 正确 ' 

}]); 


var errorMsg = validator.start(); 
return errorMsg; 


} 


registerForm.onsubmit = function(){ 
var errorMsg = validataFunc(); 


if ( errorMsg ){ 
alert ( errorMsg ); 
return false; 





</ScITipt> 
</body> 
</htm]> 


5.7 ”策略 模式 的 优 缺 点 


策略 模式 是 一 种 常用 上 且 有 效 的 设计 模式 ， 本 章 提供 了 计算 奖金 、 缓 动 动画 、 表 单 校 验 这 三 个 
例子 来 加 深 大 家 对 策略 模式 的 理解 。 从 这 三 个 例子 中 ， 我 们 可 以 总 结 出 策略 模式 的 一 些 优点 。 
口 策略 模式 利用 组 合 、 委 托 和 多 态 等 技术 和 思想 ， 可 以 有 效 地 避免 多 重 条 件 选 择 语 句 。 

口 策略 模式 提供 了 对 开放 -封闭 原则 的 完美 支持 ,将 算法 封装 在 独立 的 strategy 中 ,使 得 它 

们 易于 切换 ， 易 于 理解 ， 易 于 扩展 。 

口 策略 模式 中 的 算法 也 可 以 复 用 在 系统 的 其 他 地 方 ， 从 而 避免 许多 重复 的 复制 粘贴 工作 。 

口 在 策略 模式 中 利用 组 合 和 委托 来 让 Context 拥有 执行 算法 的 能 力 , 这 也 是 继承 的 一 种 更 轻 
便 的 替代 方案 。 

当然 ， 策 略 模式 也 有 一 些 缺 点 ， 但 这 些 缺 点 并 不 严重 。 

首先 , 使 用 策略 模式 会 在 程序 中 增加 许多 策略 类 或 者 策略 对 象 , 但 实际 上 这 比 把 它们 负责 的 
逻辑 堆砌 在 Context 中 要 好 。 

其 次 ， 要 使 用 策略 模式 ， 必 须 了 解 所 有 的 strategy， 必 须 了 解 各 个 strategy 之 间 的 不 同 点 ， 
这 样 才能 选择 一 个 合适 的 strategy。 比 如 ， 我 们 要 选择 一 种 合适 的 旅游 出 行路 线 ， 必 须 先 了 解 选 
择 飞 机 、 火 车 、 自 行车 等 方案 的 细节 。 此 时 strategy 要 向 客户 暴露 它 的 所 有 实现 , 这 是 违反 最 少 
知识 原则 的 。 


5.8 一 等 函数 对 象 与 策略 模式 


本 章 提供 的 几 个 策略 模式 示例 ， 既 有 模拟 传统 面向 对 象 语言 的 版 本 ， 也 有 针对 JavaScript 语 
言 的 特有 实现 。 在 以 类 为 中 心 的 传统 面向 对 象 语 言 中 , 不 同 的 算法 或 者 行为 被 封装 在 各 个 策略 类 
中 ，Context 将 请 求 委托 给 这 些 策略 对 象 ， 这 些 策略 对 象 会 根据 请 求 返回 不 同 的 执行 结果 ， 这 样 
便 能 表现 出 对 象 的 多 态 性 。 

Peter Norvig 在 他 的 演讲 中 曾 说 过 :“ 在 函数 作为 一 等 对 象 的 语言 中 ， 策 略 模式 是 隐形 的 。 
strategy 就 是 值 为 函数 的 变量 。 ”在 JavaScript 中 ,除了 使 用 类 来 封装 算法 和 行为 之 外 ,使 用 函数 
当然 也 是 一 种 选择 。 这 些 “ 算 法 ”可 以 被 封装 到 函数 中 并 且 四 处 传递 ， 也 就 是 我 们 常 说 的 “高 阶 
函数 ”。 实际 上 在 JavaScript 这 种 将 函数 作为 一 等 对 象 的 话 言 里 , 策略 模式 已 经 融入 到 了 语言 本 身 
当中 , 我 们 经 常用 高 阶 函数 来 封装 不 同 的 行为 , 并 且 把 它 传递 到 另 一 个 函数 中 。 当 我 们 对 这 些 函 
数 发 出 “调用 ”的 消息 时 , 不 同 的 函数 会 返回 不 同 的 执行 结果 。 在 JavaScript 中 ,“ 丽 数 对 象 的 多 
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态 性 ”来 得 更 加 简单 。 
在 前 面 的 学 习 中 ,为 了 清楚 地 表示 这 是 一 个 策略 模式 , 我们 特意 使 用 了 strategies 这 个 名 字 。 
如 果 去 掉 strategies ， 我 们 还 能 认 出 这 是 一 个 策略 模式 的 实现 吗 ? 代 码 如 下 : 


var S = function( salary ){ 
return salary * 4; 




















外 


var A = function( salary ){ 
return salary * 3; 


}; 


var B = function( salary ){ 
return salary * 2; 


}; 


var calculateBonus = function( func, salary ){ 
return func( salary ); 


}; 


calculateBonus( S$S, 10000 ); // 输出 : 40000 


5.9 小 结 


本 章 我 们 既 提 供 了 接近 传统 面向 对 象 语言 的 策略 模式 实现 ， 也 提供 了 更 适合 JavaScript 语言 
的 策略 模式 版 本 。 在 JavaScript 语 言 的 策略 模式 中 ， 策 略 类 往往 被 本 数 所 代替 ， 这 时 策略 模式 就 
成 为 一 种 “隐形 ”的 模式 。 尽 管 这 样 ， 从 头 到 尾 地 了 解 策略 模式 ， 不 仅 可 以 让 我 们 对 该 模式 有 更 
加 透彻 的 了 解 ， 也 可 以 使 我 们 明白 使 用 函数 的 好 处 。 
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设计 模式 是 软件 设计 中 经 过 了 大 量 实际 项 目 验证 的 可 复 用 的 优秀 解决 方案 ， 它 有 助 于 程序 员 
写 出 可 复 用 和 可 维护 性 高 的 程序 。 许 多 优秀 的 JavaScript 开 源 框架 都 运用 了 不 少 设 计 模 式 ， 越 来 
越 多 的 程序 员 从 设计 模式 中 获 益 ， 也 许 是 改善 了 自己 编写 的 某 个 软件 ， 也 许 是 更 好 地 理解 了 面向 
对 象 的 编程 思想 。 无 论 如 何 ， 系 统 地 学 习 设 计 模式 都 会 令 你 受益 菲 浅 。 

本 书 针 对 JavaScript 语 言 特性 全 面 总 结 了 16 个 常用 的 设计 模式 ， 讲 解 了 JavaScript 面 向 
宫 : A i 对 象 和 函数 式 编 程 方面 的 基础 知识 ， 介 绍 了 面向 对 象 的 设计 原则 及 其 在 设计 模式 中 的 体现 ， 还 分 
AlloyTeam Blog 享 了 面向 对 象 编程 技巧 和 日 常 开发 中 的 代码 重 构 。 本 书 将 教会 你 如 何 把 经 典 的 设计 模式 应 用 到 
JavaScript 语 言 中 ， 编 写 出 优美 高 效 、 结 构 化 和 可 维护 的 代码 。 
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设计 模式 与 开发 实践 









































ISBN 978-7-115=-38888=9 
图 灵 社区 : iTuring.cn 
热线 : (010) 51095186 转 600 9 78711513888890> 
分 类 建议 计算 机 /程序 设计 | ISBN 978-7-115-38888-9 
| 定价 : 59.00 元 


人 民 邮 电 出 版 社 网 址 . www.ptpress.com.cn 





欢迎 加 入 


记 > 
多 示人 竺 区 
最 前 沿 的 上 T 类 电子 书 发 售 平 合 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 狂 图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
驳 仿 得 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
体验 : 在 线 阅读 和 PDF。 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
相 比 纸 质 书 ， 电子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 束 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 OO 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 0 
搜索、 剪贴 、 复 制 和 打印 。 
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最 方便 的 开放 出 版 平台 最 直接 的 读者 交流 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 


































































































































































































版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 银子 。 

评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 

的 意愿 ， 图 灵 社区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 审 读 、 评 选 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 等 多 种 活动 ， 赢 取 积分 和 银子 ， 积 累 个 人 声望。 
图 灵 社区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 

































































社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 书 ， 欢 迎 你 来 社区 
请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 角力 的 。 
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